Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Separation of concerns

Separation of concerns

An approach to accessibility without bootstrap


Marc Haunschild

April 30, 2019

Other Decks in Programming


  1. frontend development in German Federal Office of Agriculture and Food

  2. § Marc Haunschild § Frontend Developer Accessibility Consultant § Freelancer

    since 1997 § Working for BLE since 2007 § Author of Books about CSS, HTML and Accessibility § www.haunschild.de
  3. Although I talk about my work in the Federal Office

    for Agriculture and Food, the content of this talk is my own opinion and not an official statement of the Federal Office. I’m talking here today as a freelancer.
  4. We develop public websites and internal tools for maintaining data

    in databases, based on individual programming and content management systems that appear in the same or in similar layouts with different color schemes. We need code fragments (atoms, molecules, organisms…) which work in all of them. Unlike in atomic design, we provide HTML and CSS separately, so the HTML can be exchanged and will appear in the layout oft each site, in which it is used. Think of the csszengarden ;-)
  5. Separation of concerns 1. Makes accessibility easier 2. Makes progressive

    enhancement easier 3. Keeps it smart and simple 4. Allows specialists to work together + you don’t have to learn a framework ;-)
  6. § <table class="table table-striped table-dark"> § Why a table needs

    a class “table” why a button needs a class “btn” – that’s stupid. § All my tables start like this § <table> or <table class="contact-form"> § In opposite to the first example, I can use this for white, green and pink tables! § For 80% of the webpages I made, tables weren’t even necessary. In WordPress you need a plugin before you can use tables! But bootstrap delivers quite a lot of CSS for tables. Always! § When I need them, normally they must look all the same.
  7. § Remember why we invented CSS in the first place?

    § <p bgcolor="green" size="big">I’m a headline, yeah!</p> § Back then, we wrote it by hand a hundred times on a webpage (and probably missed 10 places, where this should be). § And it was a lot of fun (not!) to change all the colors and sizes and font-weight of the headlines. § Now it’s 2019 and we write proprietary styling values in our html like table- striped and table-dark. Really? – If the designer wants to have the tables light, you will have the same fun like we had back in 1995! – But wait – maybe dark was better?
  8. § Consider this instead <h1>I’m a headline, yeah!</h1> h1 {

    background: green; } And turn it into this in just a few seconds <h1>I’m a headline, yeah!</h1> h1 { background: black; color: white; font-weight: normal; }
  9. § Remember: we will need to write Option 1 on

    every single page – and you must change it everywhere, when someone asks for it (which maybe can be automated, but what if you have to change it and 7 of 10 pages?) Option 1 <div class="container"> <div class="row justify-content-md-center"> <div class="col col-lg-2"> </div> </div> </div> Option 2 <main> <article>…</article> </main> - 1 Element less - 3 attributes less - 5 lengthy values less, which need to be learned in addition to CSS.
  10. § Option 1 also needs a lot of CSS. §

    Something like this will do something similar for Option 2 main {display: flex; flex-wrap: wrap; justify-content: center} aside {flex: 0 1 40em} aside {flex: 0 2 20em} Option 1 <div class="container"> <div class="row justify-content-md-center"> <div class="col"> <div class="col col-lg-2"> </div> </div> </div> Option 2 <main> <article>…</article> <aside>…</aside> </main>
  11. We have much more options with CSS Grid like here:

    https://gridbyexample.com/examples/ What Bootstrap cannot do: - Boxes over two or more rows of the grid - Columns over 5 of 12 grid columns - Overlapping boxes Briefly: Bootstrap is not offering a 2 dimensional grid and was outdated, when all major browser supported CSS Grid https://caniuse.com/#search=css%20grid
  12. Yes they look nice. We know this, because we see

    them everyday all over the web… Looking for something fresh? See https://inclusive-components.design or https://github.com/scottaohara/accessible_components (you must be signed in) to mention only two small collections with a lot of explanations. You need a carousel? Try this: https://van11y.net/accessible-carrousel/. My favorite media player is ableplayer: https://ableplayer.github.io/ableplayer/ look t this cool demo: https://ableplayer.github.io/ableplayer/demos/video6.html Of course bootstrap doesn't come with this, so you anyway need components from outside of the bootstrap ecosystem. There are hundreds out there waiting for you to cherry-pick what you like! Accessible, responsive tables, forms, tools, whatever – you know deque, paciello and other “big players”, but there are so many people giving away great solutions at, github, codepen… the problem: when you use bootstrap, normally you stop looking.
  13. So do all the solutions for components I just mentioned.

    And by the way – you don’t try to tell me, that CSS, HTML or Accessibility is not coming with (official) documentation? If anyone needs more than the spec, have a look at MDN, “The Great Accessibility Blogs Roundup” (that I found on the “WCAG A11y Professionals“ Facebook Page, by the way ;-) ): Not to mention all the videos of meetups, conferences, events like ID24 and so on…
  14. Knowing HTML, CSS and JavaScript makes it easy to build

    your own components, provide them for colleague's in the company's git or host it on github et altera The good thing: you do this only once Strategy for writing less Code - Copy and Paste from the repo - Using templates in your IDE - Configuring your programming framework When doing so, there are not a lot of reasons left for using bootstrap –actually I cannot think of a single one ;-)
  15. Nobody knows everything. - CSS became complex - Specialization makes

    sense - Separation of concerns minimizes dependencies – frontend developer don’t need a backend dev to change the html - Fullstack developers are a cheap (not the best) compromise
  16. Example of semantic form and typo3 generated bootstrap form

  17. You like to call a small button a small button,

    right? Go ahead, but don’t write it into the markup! Use a preprocessor instead. https://codepen.io/haunschild/pen/EZRvPg Idea taken from Gunnar Bittersmann (CSS preprocessors for the best of both worlds at https://bittersmann.de/talks/)
  18. I don't expect you all change the way you work

    from now on, but if you work with bootstrap and if you wonder if there is life after bootstrap, I'd like to tell you: "Yes". We got rid of frames, of spacer.gif, layout tables and we can get rid of bootstrap. Try it in some kind of smaller project and you might find a way for your team or company to build up your own components library, KISS and exactly fitting for your developers and customers' needs.