 So before I get started, I just want to say thank you to Singapore CSS for this opportunity Also, thank you to our host the internet. I'm a big fan of it So, you know keep on keeping on internet. You're you're a hero number one in this whole thing and Thank you as well to our previous two speakers I really enjoyed their presentations and I'm gonna be sharing them around internally in our work slack So let's get started So it's 2020 and responsive design is now mandatory for any project on the web But sometimes it seems our process gets in the way of what we're actually trying to do We seem to be obsessed with checking off boxes. Is there an iPad view? Can you use it in the screen reader? What's the time to first paint? These are all means to an end But we need to keep the big picture in mind building experiences that work anywhere and for anyone Inclusive design teaches us that it's more than just these checkboxes Where's the test for holding a screaming baby in a bag of groceries while trying to message your family? Where's the test for looking at a map on your smartphone in the noonday some? CSS is often overlooked as something to take advantage of when it comes to doing accessibility work but it has a lot of potential when viewed through the lens of inclusive design and Assumptions are the antithesis of inclusive design. So let's begin with some level setting What is the web? It's many things to many people but at its core It's about content and that might sound kind of glib. So to put it another way It's about communicating and acting on information So again, you know, what is the web structurally? This is the ideal HTML JavaScript and CSS a nice and tidy separation of concerns However, it is the web. So of course, it's gonna be a little weird Lately it's begun to feel more like these concerns are starting to blur and that's not necessarily a value judgment It just is the way things are But it does feel like because of these choices we're leaving some people out in the cold So let's set a common understanding to talk about this a little bit more HTML describes meaning it describes meaning semantically It's an ordered hierarchy of content and not an arbitrary stack of divs I would say this isn't an idealized situation, but unfortunately, that's usually not true in the real world JavaScript adds behavior. It does not create structure and this might seem like an oversimplification and hey, you're right. This is a CSS talk CSS creates priority remember at its core the web is about content and Appearance is just the visual priority of content So played with their strengths these three technologies working together make the web accessible that's one of the founding principles of the web And honoring it makes compliance easier So what is compliance? I've always thought it's weird that human centered design is a specialty in our field We build interfaces for people. So of course you want people to be able to use these interfaces At its core audits are really in compliance are really just a formalized set of checks that guarantee everyone can operate an interface regardless of their device ability or circumstances But you know that's baseline it can be so much more than that So what is web compliance? Well responsive design is adapting to an unknown browser. You don't make an assumption about where it will be accessed And inclusive design is adapting to an unknown user. You don't make an assumption about who will use it So played to their strengths these two methodologies working together cast the widest possible net to include people And that's really important because as more and more services necessary to living everyday life go online It is vital to make sure everyone can use them So what is a browser? If your entry point is a desktop chances are it'll be either edge or safari But then there's also the other popular browsers And they're mobile counterparts mobile is already a very common entry point for the web And sometimes it's the only option if you're economically disadvantaged Then there's the newcomers and the slightly less popular yet still totally legitimate browsers And they're developer additions Don't forget that the industry tends to be western centric, but that's rapidly changing. Remember, it's the worldwide web Not the wealthy western web So the point is browsers are impossible to corral and it might seem intimidating But it's actually a good thing different users have different needs And we don't want to be prescriptive because we can't know all of our users needs all the time or how they go about satisfying them And inclusive design embraces this So again, what is a browser? It's a slide that is failing to load. Cool Let me see if I ah, okay Well, uh browsers are ubiquitous, but we still don't really think of them that way Um when seeing the word browser people typically think google chrome on a desktop This should be a slide of google chrome. I imagine you can imagine it And the way we interact with browsers changes constantly, uh, this is links an early text based browser Browsers can also use a lot of different interaction modes Here a browser extension can generate a hard hierarchical list of all the headings on a page the same way a screen reader can And browsers might be on platforms. You may not immediately be thinking of the sony play stations ships with one built in We tend to make assumptions about nearly every aspect of our audience. Here's a leap pad. It's a tablet with a browser that's sold to kids And we also make assumptions based on price Here's a 30 touch screen smartphone with a color display and a camera And here's a kindle a luxury device with a slow monochromatic display We also assume that devices will come through traditional channels and be used as intended Here's a chip a full color touch display computer with a non-standard screen size that can get a browser hacked onto it in minutes And here's an oscilloscope that runs internet explorer We also tend to assume a lot about form factor. Uh, it's a fridge that runs android and yes, it's real. You can go and buy it right now It's effectively an immobile low power browser with a long product lifespan And we don't really know what the future will be like the web itself was a surprise think about how much it's changed in Only 20 years. Do you know where it'll be in the next 20? Your car's windshield your contact lenses your bathroom mirror I guarantee you that whatever the future holds there's going to be some sort of browser in it The web isn't going away anytime soon So by making things as robust as possible in the present you're making them adaptable Which is a great way for weathering the seas of change This is embracing inclusive design in the short term to do the heavy lifting for us in the long term So how does css fit in all this after all this is a talk about media queries Well, that depends on how you talk about it So writing the correct css once is pretty easy making that css work in all situations and for all people is the hard part That's a quote from mika godbolt senior design developer at microsoft for me working in all situations and for all people falls into the domain of media queries So how do I talk about media queries? Media queries describe meaning in context So close your eyes for a second and imagine you're in a dark room with some friends And there's an elephant in the room. Uh, literally not figuratively Reach out and touch it and describe what you're experiencing Uh, the tusks feel like spears the trunk feels like a snake the tail feels like a rope the legs feel like wooden stumps That's kind of how I think about media queries in that you have this ideal of a Idea of a coded site floating out there with different browsers Describing what it is from their perspective and capability And you can open your eyes now if you haven't already As a consultant, I see a few repeated patterns when working with other people's css That usually boils down to copying and pasting without knowing all the potential of the technology Another tell our libraries that make writing media queries easier But at the expense of leaving other features out That's not necessarily a value judgment people have deadlines and hey if it works it works Hopefully, however, I can give you a few more tricks to share with your team So the absence of support for media queries is in fact the first media query That's a quote from brian reager's landmark rethinking the web Rethinking the mobile web talk So what you want here are sensible defaults to accommodate the unknown So larger type and a comfortable line height and width to accommodate concerns Such as farsightedness and dyslexia Good affordances for interactive areas for motor motor control issues Such as parkinsons or arthritis And a clear hierarchy of content and chunking of information for cognitive concerns Such as reading level Cognitive disabilities are worth discussing a little bit in detail here We tend to think of disabilities as people in wheelchairs, but the vast majority of disability issues are actually cognitive This is on authority from the world health organization and their reports outline depression as one of the most significant forms of cognitive impairment This isn't assumptions about english as a second language or lack of public schooling This is a widespread genetic and environmental issue that affects the entire planet Depression can stunt things like problem solving and the learning and application of knowledge But we barely ever discuss it because of the social stigmas One way we can help to combat placing the cognitive burden on the end user is to make things easier and more obvious to use And media queries as it turns out help you exactly do just that So how do we make one? When any device's viewport reaches a minimum of width of 30 m's do the following This is what we want to do. So how do we get there? Here's the syntax when the media rule keyword of at media is present and the min width of 30 m's media feature occurs apply these selectors and declarations So why m's they? Accommodate the widest swath of browsers most importantly since they are based on type size. They elegantly and dynamically accommodate browser zoom That's helpful for people with low vision A lot of exhaustive research has been done on this and to be honest your pixel value use case isn't as clever as you think it is And rems fall apart in some really obscure edge cases So just just trust me here for a moment. Just just use m's So now let's up the complexity a little When a device with a screens viewport reaches a minimum width of 30 m's do the following So how do we get here? With a media type of screen and a minimum width of 30 m's apply these selectors and declarations The media type is a subtle but important distinction. It targets screens So what other media types are there? See here's all the media types listed in the documentation on the w3c There's all which targets all media type devices Arl which targets speech and sound since the synthesizers braille, which targets braille tactic tactile feedback devices embossed Which targets paged braille printers handheld which targets small or handheld devices print which targets printers projection, which targets projected presentations Screen which targets computer screens speech which targets speech synthesizers tty which targets uh tell types and terminals And tv which targets television type devices You know, so that's really cool. But again, it's the web so things aren't going to be easy and straightforward Only all print screen and speech have wide enough support to be used with confidence Of those four speech is tricky because of the lack of any real support for rl css properties Um, yes, they exist and yes, it would be awesome if we could use them Arl css is intended to tell a digitized voice How it should read content the same way regular css tells the browser how to visually display content Uh, that's good for screen readers, but don't forget that digital assistants are becoming very popular Print is often overlooked but more people print web pages than you'd think css media features like before and after Cito elements let us create meaningful artifacts like printed URLs for links and descriptions of the main takeaway for interactive visualizations I've even seen qr codes, uh on print style sheets for long difficult to type URLs that preconfigure user facing state Which goes to show a little consideration can go a long way user experience wise Another interesting thing I'd like to point out here Handheld projection and tv have all been deprecated because what is a tv? You know, what is a projector? Good inclusive design principles obviates the need for these kinds of distinctions If your color contrast ratio and type size are good, you don't have to worry about targeting a projector Print is often overlooked, but more people print web pages than you'd think uh, how does it repeat? And where am I? Hello? Yes Sorry about that Another thing I'd like to point out is the all media type A lot of browsers will default to using this if you don't explicitly state a media type And this can get you into trouble via the unintended consequences of the cascade It's better to get in the habit of declaring screen when you make visual edits So cool, let's talk media features now the background from this slide is one of my favorite scenes from a movie The blues brothers asked the bartender of a backwater bar. What kind of music they usually play And she answers. Oh, we got both kinds. We got country and western And that's kind of how I feel about media features Most developers only use width and height, but we have eight other media features available to work with So there's height and width But there's also aspect ratio which determines the ratio between a the viewport's height and width There's color which determines device's presence of color in the device There's color index, which is the number of entries in the color lookup table Grid is if the device is a grid device such as a tty terminal Monochrome is if the device does not have color and uses shades of a single color in place Orientation is if the device is in landscape or portrait mode resolution is if Targets the display density of the device and scan is the type of scanning process the display uses to refresh These are important They allow us to really dig into the capabilities of a device the quality of its screen It's physical orientation in space how it handles color However, a lot of the time in these lists you will also see these three deprecated features Device aspect ratio device height device width simply put don't use them Remember, it's near impossible to know what a device is But we can react to how a device behaves Like programming languages media queries also have logic. It's pretty basic, but also pretty powerful in the right hands The at media declaration itself is an if statement if the browser supports at media do something You can chain with and target screens with both a minimum height of 20 m's and a minimum width of 30 m's Or allows you to apply this or that target anything with a max width of 10 m's or a minimum width of 20 m's but nothing in between And you can exclude with not So target anything with a max width display of 10 10 m's that isn't monochrome So why is all of this so great? With good namespacing discipline You can adapt your content to best fit the device it will be consumed on without specifically knowing what that device is So you want to use media queries to write small surgical tweaks that enhance the class and not the page the class is placed on So here the theme background class can safely remove images for devices that would break if they try to display them And remove backgrounds from media that would choke on rendering them um People still use grid displays and still print web pages and not for the reasons you'd initially think For example, I've got a terminal powered by webkit open on my computer right now And a stack of printed slide notes in case things go really bad So armed with these expanded capabilities, how do we go about best using them? First you want to set your break points based on ergonomics and not devices Think about how we position ourselves around our devices and that you may not always have the luxury of being the one doing the positioning Uh, your distance from the device is a good baseline for setting type size Ask yourself is the type sufficiently large enough to read when you hold the device in your palm or on your lap When you're sitting at a desk or when you're across the room In fact, take a moment to think about how you're viewing this presentation right now Good typography is the cornerstone of any interface Once you have it established you can build outwards with confidence With regard to media queries a very smart guy called brad frost Advises us to not go overboard to treat layout as an enhancement and to let content determine break points Um, remember to think not in terms of audience, but in terms of people People aren't always going to be on a webkit browser or a windows machine, but they will be reading the web Don't target common device screen sizes. Even if your analytics guy wants you to you have people that use ipads not ipad users That's a subtle yet important distinction I'd also like to point out another at rule supports. I believe it was mentioned briefly in uh john's talk Although it is not technically a media query. It is very much in keeping with the spirit of this presentation Supports allows us to construct what is known as a feature query Which lets you adjust the interface based on what level of compliance the browser has for modern css features That ensures that everyone gets a high quality experience regardless of their device In this example, the site's text would get a high contrast fallback that Would have otherwise been illegible when rendered by a browser that does not support background blood modes Which is gradient loaded full page hero screens that seem to be so invoke these days All right, cool. Now, let's get on to the obscure stuff A high contrast mode is a setting that makes interfaces legible for pure for people experiencing extreme low vision On this example, the logo on the boston globe is not visually apparent when high contrast mode is enabled This is bad because logos that link home are common affordance people will use to navigate And remember that high contrast doesn't always mean a low vision disorder is present either Uh pro tip max brightness and high contrast mode enabled allows you to use your laptop in the garden Looks ugly, but functional. You may get ugly, but functional tattoo. That's that's a great phrase So this is a tweet by somebody called shaman glass and He's not a specialist or an industry rock star He's just some guy on twitter Who is environmentally disabled by a bright sunshine who's making the technology work for him and not the other way around The high contrast mode media query only works in internet explorer and edge on windows 7 8 and 10 for now In the example, we're telling the svg icon in a button to match the color of the button label Whatever the label color might be set to And i'm saying set to because windows high contrast colors are mapped to css system color keywords This is important because windows allows you to create custom high cost streams high contrast themes with your own colors So the colors that you set could hypothetically be anything And here's some mapping of the content types and the relevant keywords that will allow you to work with high contrast mode text maps to window text links map to the anchor element Selected text is highlight text and highlight, which is the foreground and background of the the highlight respectively Button label maps to button face and background maps to window Again, you want to use these values in place of static color Declarations, but only if your content doesn't show up And the best way to avoid your content not showing up in high contrast mode is to use semantic html Uh p elements for paragraphs heading elements for headings button elements for buttons. You got the idea Reduced motion. What's that? Well, it's exactly what it says it is Reduced motion allows you to target users who have explicitly stated a preference for less motion in the ui animation This is great for people with vestibular disorders adhd in migraines Or for people like me who are impatient kermudgeans who have no time for watching gratuitous ui animation over and over and over again This media work media query works in current versions of edge firefox safari opera and chrome But only when reduced motion is enabled in the operating system preferences In this example, we're removing animation from a large background But we could also slow it down or simplify things if the use case requires the animation In order to convey critical information. Again, it's prefers to reduce motion not prefers no motion Like high contrast mode these tweaks are there for those who need them to make the experience work for everyone regardless of their circumstances Not a lot of people are aware of these two features, but that doesn't mean we should ignore using them because of it You might be in a situation where you're not seeing the personal benefit or you are but your boss might not see the business case And here it's important to remember that disabilities are more than just screen reader support there a spectrum of concerns and inclusive design teaches us that disabilities can be conditional harsh glare a fever a broken arm depression not knowing the native language or just simply getting older Unfortunately, we also live in an age where people can and will use disabilities triggers as attack vectors such as deliberately sending a journalist with epilepsy seizure inducing tweets So advocate for your future self and in doing so advocate and make the web better for others All right, uh, let's talk about the future now The writing is on the wall and by wall. I mean the specs. It's feature queries Feature queries are media queries for user preferences Existing media queries have display really locked down So now it's all about letting our users tell us what they want and responding to it We've had a taste of this with the last couple of examples. So let's see what's coming down the pike Interaction covers the new pointer and hover media features which go together like strawberries and chocolate These two features can adjust the display based on how we interact with the device Pointer reacts to the accuracy of the device's primary form of input Um, so it can be coarse, which is a pointing device with limited accuracy fine Which is an accurate pointing device such as a mouse and no pointing device So there is none no input whatsoever other that that makes contact with the screen It's important to note primary is the operative word here since there are devices that can accept multiple forms of input Here's a microsoft surface a device with a touchscreen a trackpad a stylus and a wireless mouse And you need to keep this sort of thing in mind when you start messing around with things like clickable areas Remember also that individuals with motor control issues may augment their device tools And that it's just easier to work with the cascade and create sensible touch target sizes from the start Hover capability is also determined by the device's primary input mechanism. Um, you have hover which is a device that can Hover with limited accuracy from the pointing device Um, you have on demand which is kind of what we're used to on the traditional desktop Which is more or less instantaneous hover on mouse over and then uh, no hover which is the accurate pointing device such as your finger making contact with a smartphone screen As a rule, I don't like interfaces that utilize hover to explode expose functionality it's a throwback from a desktop and mouse centric era And in addition to issues with discoverability It is also problematic for people with motor control issues to say nothing about technological literacy concerns I think it's also worth mentioning here that small devices aren't always lacking in hover capability And the opposite also applies large devices might not have hover capability as well iPad pros anyone All right, so now let's talk about media queries that speak to the display itself Display mode allows us to change things based on how the browser itself is presented There's browser, which is what we're used to with tabs another ui chrome Uh full screen, which is when the browser is full screened such as this presentation in google slides um Minimal ui is where the browser will behave like a native app but still display some parts of its chrome And standalone where it basically operates like a completely native app on your device So as progressive web apps become more popular, uh, these media queries become more important The inclusive design angle here is a low bandwidth battle for the home screen one Where web apps can behave like native apps while still being open and interoperable The web is becoming a first-class citizen for mobile operating systems Which is huge because frankly the accessibility of android apps stinks And html as a format is far more accommodating to assistive technology Update checks how quickly the device is able to modify the appearance of the content Slow is if it display updates infrequently such as a kindle update updates frequently such as a computer monitor And no none is no update frequency info transmitted. This can be for a eink display Or something similar And this one's pretty straightforward You're able to more granularly craft experiences for eink or lower power devices such as removing animated gifts For devices that may struggle to render them in real time So a gentleman by the name of andre's galant wrote a great article for cs tricks about putting them all together He says mobile small portrait slow interlaced monochrome course non hover first By which i mean mobile first was a great starting point for when we first were figuring out what responsive design was But in our everything has a browser now World this update provides a rock solid future friendly foundation on how to think about building interactive experiences The prefers color scheme media feature allows you to style your content based on the color theme the user has chosen Most of you know this is styling for dark mode and there are a ton of really good articles that have already been written about the topic So i'm not going to spend much time on it on this presentation I would however like to call attention to a certain someone's dark mode Implementation as it's one of the coolest looking ones i've seen out there Light level uses the devices sensors to determine how bright the environment is This media query makes me feel old because we now assume that the majority of devices will ship with some sort of camera built into them Uh, some of you may remember Mandy's earlier Singapore css talk where she demonstrated the ambient light api Uh, that javascript and this css media query are two sides of the same technology coin, which is really cool There are three options for light level normal dim and washed This is also cool because washed has been discussed as a supplement for high contrast mode In that you want things to stand out more when there's a ton of glare being applied to your screen Let's also note that normal lighting is rated to what the manufacturer of the device describes as ideal for the screen But since these technologies are open and interoperable There is also the potential to override them as a user Say with a system wide preference toggle or a uh custom browser extension Scripting allows us to target javascript or the lack thereof You know if if js can reach into css. I feel it's fair that the opposite can also kind of happen here Um, there are three values enabled none and initialed Um enabled is if the user can support javascript. Well, none is if it is disabled or it fails to load Remember even though we live in the age of monolithic javascript frameworks Every user technically does not have javascript until they do when it loads And this might get me some sub tweets from guys with fancy twitter bios But the larger the javascript payload the larger the chance of failure Um, and if you're thinking this smells a lot like arguing for progressive enhancement You're absolutely right Environment blending lets us target the characteristics of someone's display This means we can adjust our content if the device is opaque like a traditional monitor Additive means display color blends with the colors of the real world such as a car's heads up display Whereas subtractive means the opposite an example of this would be an lcd embedded in a mirror Inverted colors are the poor man's high contrast mode most operating systems can do it I use it when an app on my iphone doesn't have support for dark mode And you know again, you can chain this media feature using the media query logic described earlier And it's worth mentioning that chrome actually has an extension for inverted colors Which is a good reminder that you shouldn't be in the business of trying to do design device sniffing Especially when it comes to assistive technology A practical application of inverted colors would be this double inversion technique Where are you invert inverted multimedia? Simple and powerful and ensures the content remains legible and nice looking regardless of what mode it is currently being viewed in And um, you know remember high contrast mode from earlier. Well, guess what? The forced colors media feature is the updated version of it Force colors will be a standard that all browsers can implement Which is great because it grants people more choices for what browser they can use Especially browsers that play will well with assistive technologies such as safari and firefox And finally Prefers reduced data lets you target when someone has set their device to a mode where it uses less of their data plan This is useful for all sorts of scenarios Especially ones where if where a phone may be someone's sole source of access to the internet A great example of how you be able to use this media feature could be loading decorative assets Only when a user has the bandwidth for it background images are a great example of this as well as fonts Preferred reduced transparency is a lot like preferred reduced motion Instead of removing animation. We get the ability to target the presence of semi-transparent operating system chrome All major operating systems have this ability to disable their semi transparency effect And all major operating systems have had accessibility issues with this visual treatment Of note is ios 7 when it first rolled out With preferred prefers reduced transparency You can make sure that someone who is struggling to determine what is the foreground and background Can actually read and take action on your content Which honestly makes me question why you didn't design it that way in the first place Many of these so you know many of these features can be tricky to discover if you don't spend all day working with technology Remember when brand reger said that the absence of a media query is the first media query to consider Well, I'd like you to think about how accessible something is without any special features turned on Start with good accessible defaults tested by the people who will be using your site or app And only make media query tweaks when you need to because you can't always know if someone will have these features enabled Or are even aware of they exist And so we don't end on a low note here I'd also like to say that media queries have have a lot of potential and by reacting to user needs They are only going to get better not only for developers, but also for the people who would be using what they make There's going to be a ton of wonderful things written by brilliant people that we'd be seeing in the coming months and years And I for one can't wait to use them So, um, thank you for this wonderful opportunity, uh, Singapore CSS and to you the audience for your time and attention I know we covered a lot of material. Um, so If you want to reach me here's a slide that's not loading. I'm eric w Bailey dot design, uh, is my personal website and I'm at eric w bailey Posting the slides with links to resources I used to develop this talk And if we have time for questions, I'd love to answer any of them and uh, thank you again