Designing for Inclusion with Media Queries – Eric Bailey : #ID24 2017

Designing for Inclusion with Media Queries – Eric Bailey : #ID24 2017

— — it’s also the place to ask questions. And I’m guessing there’s going to be a lot
of those, really looking forward to our next speaker, Eric Bailey. Eric is a user designer out of Boston. He’ll be talk about CSS Media Queries. Over to you, Eric. Great. Thank you so much. So let’s see here. All right. Can everyone see my screen? Great. No, we’re still seeing you. Oh. that’s a problem. Here we go. Perfect. All right. So it’s 2017, and responsive design is now
table stakes for any project on the web. Sometimes it seems our process gets in the
way of what we’re actually trying to do. We seem to be obsessed with checking out boxes. Is there an iPad view? These are means to an end. But we need to keep the big picture in mind
which is building experiences that work for anyone. Inclusive design teaches us it’s more than
boxes. Where’s the test for holding a screaming toddler. Where’s the text for the map looking at a
new restaurant? CSS is something to look of taking advantage
of– it has a lot of potential when viewed in inclusive designs. Assumptions are enthesis of inclusive designs. What it’s web? Well, 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. What is the web? Structurally, the ideal, HTML, JavaScript
and CSS, a nice tidy separation of concerns. How much it is the web so it’s going to be
weird. Lately it’s begun to feel these concerns are
starting to blur. That’s not necessarily a value judgment. It just is. But it does feel like because of these choices,
we’re leaving people out in the cold. Let’s set common understanding to talk about
this more. HTML describes meaning and it describes Semantically. It’s a hierarchy of content. This is an idealized information. JavaScript adds behavior. It does not create structure. This might be an over simply identification. And you’re right. CSS creates priority. Remember, at its core, the web is about content. And appearance really just is the visual priority
of content. so play to their strengths, these three technologies
work together make the web accessible. That’s the founding principles of the web
and honoring it makes compliance easier. What is compliance? I’ve always thought it’s weird that human
center design is a specialty in our field. Of course you want people to be able to use
them. At tits core, auto compliance is a form 58
iced set of checks that everyone agreed on that guarantees everyone can operate and interface
regardless of ability. That’s the baseline. It could be so much more than that. So what is web compliance? Well, responsive design is adapting design
to an unknown browser. You don’t make an assumption about where it
will be accessed. Inclusive design is adapting design to unknown
user. You don’t make an assumption about who will
use it. So play to their strengths, these two methodologies
can cast the widest possible net for people. And that’s important because as more and more
services necessary will living every day life online, it’s vital to make sure everyone can
use them. What is a browser? If your entry point is a desktop, chances
are it’s safari. There’s the hole is a common entry point for
the web and sometimes it’s the only option. There’s the newcomers and the slightly less
popular but totally legitimate browsers. Don’t forget we’re rapidly– it’s the worldwide
web, not the wealthy western web. Browsers are impossible to corral and might
seem intimidating. That’s a good thing. Different users have different needs. We don’t want to be prescriptive. Inclusive design embraces that. So what’s a browser? Um, browsers are ubiquitous, but we don’t
think of it that way. When we see the word browser, people think
Google chrome on desktop. The way we interact with content changes. And browsers can also use a lot of different
interaction modes. Here a screen reader can display the links
on the page as an order of list. And browsers might be on platforms you’re
not thinking of. We tend to make assumptions of aspects of
our audience. Here’s a leap pad. We make assumptions based on price. Here’s a $30 smart screen touch phone with
a colored display camera. And here’s a kindle. We also assume that devices will come through
traditional channels and use as intended. Here’s a chip, full color computer. And here’s one that runs Internet Explorer. We also tend to assume a lot about form factor. It’s a fridge. Yes, it’s real. You can buy it right now. It’s really an I am mobile browser. we don’t
know what the future will be like. The web it sexual was a surprise. Think about how much it’s changed in 20 years. You know where it will be in the next 20? The car’s windshield, contact lenses, the
steam in your shower. There’s going to be some browser involve in
the that future. The web isn’t going anywhere any time soon. By making things as robust as possible in
the present, you’re making them adaptable. Which is great. This is embracing inclusive design in the
short-term to do the heavy lifting for us in the long material. So how does CSS fit into all this? This is a talk about Media Queries. That depends on how you talk about it. So writing the correct CSS once is easy. Making that CSS work in all situations and
for all people is the hard part. That’s a quote. Senior designer developer at Microsoft. For me it falls into the domain of Media Queries. Media Queries meaning and context. So close your eyes for a second and imagine
you’re that a darkroom with friends and there’s an elephant in it. Reach out and touch it. And describe what you’re experiencing. The tusks feel like spears, the trunk feels
like a snake. The tail like a rope, the leg like wooden
stumps. That’s how I think of Media Queries. You have a site floating in the ether different
browsers describing what it is from their perspective. And you can open your eyes now in you haven’t
already. The basics as a consultant– it boils down
to copying and pasting without knowing the technology. At the
expense of leaving– that’s not necessarily a value. judge. 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 from Media Queries
is in fact the first media query. That’s a quote from Brian Reiger’s talk. What you want are sensible defaults to accommodate
the unknown. You want larger type and comfortable line
height to — dyslexia. You want good accordances for control issues,
and a clear hierarchy for cognitive concerns and reading level. You know, these are good design practices. But you’ll be surprised how often it’s not
observed. So yeah, now let’s get onto the actual media
query support When any device view port reaches the minute
petroleum width of 30EMS do the following. How do we get there? There’s the syntax, when the media rule [email protected]
is present, apply these vectors and declarations. So YMs? They accommodate the browser. Since they’re — they elegantly and dynamically
accommodate. A lot of research has been done on this. And your pixel values is not as clever. RAMs fall apart. So trust me, us em. Use em. Now it’s up to complexity a little. When a device with a screen’s view poured
reaches a minimum width of 30 ems do the following. How do we get there? With a media type of screen, apply these selectors
and declarations. It’s important. It targets screens. What are the media types are there? Here’s all the media types listed in the documentation. Altar gets, braille targets, braille tactile
devices, and printers, handheld small and devices,– projection screen targets computer
(Record read.) 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 oral support from CSS properties. Yes, it exists. It’s awesome if we can use this. It tells how to read content. The same CSS displays content. This is good for screen readers, but don’t
forget digital assistance is becoming popular. Print is often overlooked. But they print WebPages often. After pseudo elements, create meaningful artifacts–
I’ve seen QR codes for long difficult to type URL codes. A little consideration can go a long way. Another interesting thing I want to point
out here, hand held and TV have been deprecated. What a TV and projector? Good design principles obviates the need for
these. You don’t have to worry about targeting a
projector. The all media type, a lot of browsers will
default to using this. And this can get you into trouble via the
cascade. It’s better to get in the habit of declaring
screen. The background from the slide is one of my
favorite scenes of the my movie. The blue’s brothers. She answers, we’ve got both kinds, country
and western. That’s how I feel about media features. We have other eight media features to work
with. Aspect ratio determines the ratio between
the height and width. Color determines the presence of color. Color index determines the number of entries
and the color of look up table. Grid determines the device. Monochrome determines if the device uses shades
of a single color orientation landscape and for rate. Resolution– (Record read.) and scan determines
the type of scanning processes such as progressive scan. Viewer important. They allow us to dig into the capability of
the device. How it handles color. However, a lot of time in the list you’ll
see these deprecated features. Device aspect ratio, device height, device
width. Simply put, don’t use them. It’s impossible to know what a device is. But we can react how to a device behaves. Media Queries has logic. It’s powerful in the right [email protected] media
declaration– if the browser [email protected] do it. You can change — minimum hide of 20 em and
minimum height of 30 ems or allows you to do this or that. (Record read.) but nothing in between. And you can exclude with not. Target anything with a max width with 10 em. Why is this great? With good names and discipline you can adapt
the content to fit the device it’s going object on. Use media queries to enhance the class and
not the page of the class it’s placed on. Here the theme background class can remove
images– and remove backgrounds from media that would choke on rendering them. People use displays and print web pages and
not for the reasons you think. For example, I’ve got a terminal powered by
web kit opened on my computer right now. Under these expanded capabilities, how do
we go about using them set your break points based on ergonomics. And remember that you don’t always have hands
to do it. Positioning is a great base line for setting
type. Ask yourself, is the types sufficiently large
enough to read when you hold the device in your palm? Or place it on your lap or sitting at a desk
or when you’re across the room? You know, in fact, take a moment to think
about how you’re viewing this presentation right now. Type, is the cornerstone of interface. Once you have that establishes, you can build
outwards. With regard to media query, a smart guy Brad,
advises us not to go over board, treat layout as enhancement and let content determine break
points. People aren’t always going to be on a web
kit browser or Windows machine. Don’t target common device sizes. You have people that use iPads, not iPad users. Supports, although it is an a media query,
it’s keeping with the spirit of this presentation. Support allows us to construct a future query,
let’s you adjust the interface, what level of compliance the browser has. That ensures that everyone gets a high quality
experience regardless of device. In the example, the sites text will have a
high contrast fall back that would otherwise will be illegible with another browser that
doesn’t support it. It’s perfect for the graded screens that is
in vogue these days. Components make things easier to manage. If you’re using a CSS preprocessor, you can
include the media query inside. And it will export as valid CSS. This makes the code easier to understand. Remember inclusive design principles can extend
to code. So they’ll optimize the CSS, let robots mind
the things they’re got the minding. For example the CSS nano part of the process
maintains the sheet you pass it. Remove redundant properties and standard Ides–
this makes things friendly. This micro optimization– creates the smallest
possible download. This is good for everyone. Developing countries, rural areas, people
on the bus, train on conference WiFi. People with Comcast and rich nerds on the
subway reading the documentation an hour before deadline. Under the obscure stuff. On this example, the logo on the Boston Globe
is not apparent when high contrast is enables. That’s bad. And remember that high contrast doesn’t always
mean a low vision disorder is present either. Per tip, max brightness and– allows you to
use the lap to be in the garden. Looks ugly but functional. that’s an advice from someone on Twitter. He’s not a specialist or industry rock star. He’s a guy on Twitter making technology work
for him. The high contrast mote only works on Windows
edge for now. We’re telling the icon to match the color
of the button label whatever it’s set to. Windows high contrast colors are– this is
important Windows allows you to create high contrast themes. These colors could be anything. Here’s a mapping of the content types and
the relevant keyboards that will allow you to work with high contrast. Text window text, links A, selected text,
highlighting text, button lane, button face, and background maps to window. I wrote articles about this that try to use
color declaration. The keyboards were pointed out to me by my
friend. Which is a classic case of a man stumbling
into something a smarter woman already knew about. So reduce motion. What’s that? Well, it’s exactly what it says it is. Allows you to target users who have explicitly
stated for a preference of less motion. This is great for people with vestibular disorders
or ADHD or people like me who don’t have time to watch –. this works on safari and iOS. In the background, in the example we’re moving
animation from a large background. You would potentially slow it down or simplify
it in the code. If the use case acquires the information. Like high contrast most these tweaks are those
for those who need them. And not a lot of people are aware of these
features, it doesn’t mean we should ignore using it. You might be in a situation where you’re not
seeing the perm benefit or you are but your boss might not see the business casement it’s
important to remember here that disabilities are a spectrum of concerns. Inclusive design teaches us also that disabilities
can be conditional, a harsh glare, a fever, a broken arm, not knowing the native language
or just getting older. Unfortunately we also live in an age where
people can and will use disability trigger was attack vectors, sending a journalist with
epilepsy seizure inducing tweets. Advocate tore yourself and in doing so, advocate
for others. Let’s talk about the future. The writing is on the wall. And by wall I mean the specs. It’s future queries, they’re Media Queries
for useful purposes. It has display on lock down. It’s all about letting our users tell us what
they want. We’ve had a taste of this in the last two
examples. Let’s see what’s coming down the pike. Color gamut –. but inclusive design concerns
should be handled with proper contrast ratio and not gamut. If you’re using large amounts for critical
information, you want to rethink your content strategy. Interaction covers the new pointer and hover
media features which go together. 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. You have course which is a pointing define. Fine accurate pointing device. And none. There’s no device. Primary is the operative word here since there
are devices that can accept multiple forms of input. Here’s a Microsoft surface: Keep in mind,
the sort of thing when you start messing around with clickable areas and remember individuals
with motor control issues may augment the device. And that honestly it’s just easier to work
with the cascade and create sensible defaults from the get go. Here hover which is a pointing devoice of
limited accuracy. A devise can emulate hover. There’s no hover capability. And kind of a tie back to Cordelia. As a rule I don’t like interfaces that utilize
hover. It’s a throw back from a desk stop and– issues
with discoverability, it’s also problematic for people with motor control issues to say
nothing of technologically concerns. It’s worth mentioning that small devices aren’t
always lacking in hover capability. Larger devices may not have that capability
either. Let’s talk about media craze. Display mode allows us to change things around
based on how the browser is presented much that’s how it displays chrome, small screen
or if it’s a stand alone app with– browser’s back and forward buttons. As progressive web apps become popular, this
is more important. The inclusive design angle here is the battle
for the home screen one where web apps can behave by native apps while being open and
inoperable The web is becoming a first class citizen or mobile OSs, which is huge. HTML is a format far more accommodating to
assistive tech. Update checks quick hi how the device able
to modify the appearance on the screen, slow fast or none. This is straightforward. Here you’re able to granularly craft experiences
for lower powered devices. So a gentleman by the name of André 0 an
article about putting them altogether. Mobile, small, portrait, slow– that’s a mouthful. Mobile first was a great starting point when
we were first figuring out what this whole responsive design thing was. But in our– everything has a browser now
feature, this update on the term provides a rock solid future foundation to build from. Light level uses the devices sensors to determine
how bright the environment is. This media query makes me feel old because
we assume the devices will shift with camera built into it. There are three options for light level, normal
dim and washed. That’s cool. Washes is a supplement for high contrast mote
mode. With media–
Let’s also note that normal lighting is rated to what the manufacture describes as ideal
for the screen. But since these technologies are inoperable,
there’s a potential to over right them with a systemwide toggle offer browser–
Scripting allows us to target JavaScript or the lack of it. There are three values, enabled, none and
initial. Enable if the user can support JavaScript
while none if they have to disabled or fails to load. Remember even though we live in the monolithic
JavaScript every user does not have JavaScript until they do. This might get me sub tweets from guys with
fancy Twitter bios, the larger the JS pay load, the larger failure. So initial only indicates that scripting is
enabled during the initial page load but is not supported afterwards. Examples are printed pages or prerenderring
network proxies that render a page or a serve and send a nearly static version of the page
to the user. It’s tricky. The authors are still trying to figure out
what the difference is between a server rendered page and page with deferred loading JavaScript. Personal live I think these are champagne
problems. Performance WebPages are often times accessible
pages. For example, lighthouse, Google’s web app,
uses accessibility audit as primary scoring metric
Inverted colors are the poor man’s high contrast mode. Most operating systems can do it. I use it when using my iPhone at night. You can change it. It’s worth also mentioning that chrome has
an extension for it which is a good reminder you shouldn’t be in the business of doing
device sniffing especially for creative technology. A practical application of this would be the
double inversion technique where you invert, multimedia. So it’s a simple and powerful vector. And it ensures that content remains legible
regardless of the mode it’s viewed in. Our old friend reduces motion is also listed. All the work you did for Android devices,
soon it available to everyone. And finally, we have custom media queries
this. One is weird to wrap your head around. So bear with me. If you weren’t aware, CSS is getting support
for a special syntax called custom properties. These special properties are variables that
are declared in the root vector to give them global scope. The root vector being equivalent to the HTML
vector, they are key value pairs that print out whatever string you define. so here I’ve been using them to do simple
theming work. And the cool thing about CSS custom properties
is that unlike preprocessor, they’re accessible via JavaScript on the live site. Send data back from CSS to JavaScript we resort
to hacks, writing CSS values, in the output and parsing it in JavaScript. But now, gotten the CSS styles targeted in
JavaScript you can manipulate them. So here, I’m switching the values for the
primary and secondary brand colors. And then you can take it one step further
and work the logic into dynamic components. This button toggles inverting the site theme. It’s a simple example but hopefully makes
sense. On the same vain you’ll be able to declare–
they’re functionally the same. And author defined custom string. Like CSS custom properties, you can use them
in the site CSS. The easy one here is a set one, update every
day approach. But don’t forget you can manipulate them with
JavaScript. I’ll admit this amount of power is potentially
very intimidating. But I think there’s potential for being future
friendly. We’re leaving the doors wide open. It could be interfacing with assistive technology
we can’t dream of yet. There’s going to be a lot of wonderful things
written by brilliant people to be seen in the coming years. I personally can’t wait to use them. I appreciate feedback or pointers you have
for this presentation. I know I’m running early. But I’d love to hear your thoughts about the
material. Here’s how to reach me. I’ll also be posting slides with links to
the resources I use to develop this talk. By day I’m a consultant for a design and development
agency called cantina. So give me a holler if you’re interested in
meeting up in the Boston area. Thank you for your time. And thank you to ACS for the transcription
work and to the Paciello Group. I hope enjoy the rest of ID24. That was great. Thanks, Eric. Thank you. Let me fix this. Yeah. So I went a little faster. But we’re here. That’s always the way it goes when you’re
out live. But some great, you know, comments again coming
in from all sorts of different places. We’re– the practical advice about deprecating
values and practical ways to use the Media Queries. Interesting talk. Thank you. This is Karl, I was interested to hear your
comments about RAMs versus ems, can you expand that a little bit because I think that’s the
kind of thing that some people get confused about. That’s a great question. Just kind of, like– ems are scoped to the
font size of the current container element. Whereas REMs are to the document. So the body tag has a font size of 20 pixels,
one– the trouble with this is, #1, you have legacy browser support. Some browsers don’t support RAMs if you’re
going way back. And you get into that crazy, ridiculous edge
case of zooming with REMs declared in an old browser, and potentially not having it sized
to like having some sort of port. manipulation, where it doesn’t know what to
do. So it goes with what it knows which is it
doesn’t know anything. And it stat you I cannily doesn’t do anything. In the point of screen zoom. So from an this perspective, one of the things
we run into a lot when it comes to, uh, when it comes to zoom is when stuff gets hidden. And it’s really surprising sometimes the way
that certain things can get hidden when it comes to like, fixed heights of containers
where the text and side is not a fixed height. And so like people will think, okay, you know,
my font size will expand to whatever, you know, 200% or whatever of the default. But the container itself– [NO AUDIO]. [NO AUDIO]. [NO AUDIO] Youtube down ) Type and REMs for the components sort of padding and margin, and
spacing. And the idea there is that, the type will
scale relative to the scale of the component. And the component is going to scale relative
to the document font size which is kind of a word– jargon. I’ve seen it in action. It’s really, like it stakes that zooming experience
and makes it a lot more elegant than just things blow up and cramp against the walls
of the browser. We see that sometimes where, you know, there
is this motion towards component-based UIs. Especially through things like angular and–
we tend to think of these things as anatomic level component. But then we have to make them work together. And I mean, personally, and I think people
have a little bit of dogmatic reaction to the idea of having our CSS tied to our components
and all that sort of stuff. I like it. Some of that stuff is also going to be tricky
and I like the idea of letting the culture level sort of handle that thing. Yeah. For the component, too. The weird like, you know from the UX designer
view of things, like everyone’s all about, like, oh, you don’t have pages, you have floats. But the reality of the situation is you’re
going to have a page. That page will have state. But you can’t escape the fact at a certain
point it’s going to be tags in a document. And you really need to start and make that
your kind of, your foundational experience. You know, I actually like, on the components
argument, I like working with them in that from an accessibility compliance standpoint,
they’re very scoped. You can run your battery of automated tests
on them and that frees you to start look at, okay, well, with the confidence that this
self-enclosed element works, how does it react to this guy? What happens if I do weird stuff to them Exactly. So it’s an idea– I think, you know, some
of the people have done this design, the atomic design stuff with an idea that, yeah, it’s
going to have to put in a view of some sort. At a bigger level in– especially in an application. It’s a different story of course, when it’s
a text based website. When we’re talking about applications, that’s
when it can get really ugly whether it’s not handled right. Yeah, I guess I’m supposed to say, even throw
drop buzz word after buzz word, I think this approach works well for static, non-app sites. Again the component based thing. It’s very freeing to focus on something, zoom
out, focus on something else, Zoom out. And then like I guess to your point of the
angulars and the reacts of the world. Just because it’s a single paged app doesn’t
mean we’re free from the responsibilities of compliance. A lot of people think, if you’re clever about
your react set up, that frees you from the need to make it accessible. That’s kind of gross. [laughter]. So I can hear the sub tweets already. Let’s check and see if there’s any sub tweets
going on now. yeah. Well, that’s all I have. Bill, Matt, do you guys have anything? No, other than just to add that that was an
awesome talk, clearly Twitter is liking it. I’m sure Eric has noticed his– going off
like mad. He’s got it turned on. I’m going to turn my phone on. If not you’ll get the celebrated 20 plus this
afternoon. There’s something, Eric you talked about that
interested me. That was the media types or oral and speech. And sort of– have you got thoughts what’s
now called the CSS speech module? I would love it. I think the RO CSS properties were ahead of
their time. But that also sounds weird because it also
in my mind I should have been a part of it from the get go. I’m going to trip over my words here. But I think you know, especially with concerns,
too, like all the major devices now ship with a narrator built into them in some capacity. And a lot of people don’t consciously recognize
that they shift between these operating modes. The one thing I like is the notion of being
to create a user experience with oral hierarchies. Single voice for certain kind of interaction
or certain kinds ever content and another for another, like, when I do testing, you
can set voice over to have separate voices for separate kinds of like subscribing a link
versus reading the content on the page. That’s what I like to do. These are the words, this is the technology. Yeah. So what do you think– I agree with you. I like the idea that we can have, you know,
audible kind of experience. So and calling attention to something, if
a push notification comes through, there’s this design visually that calls attention
increasing the volume or the pitch of the voice that your screen uses or something is
great. Every time I’ve talked to and written about
this, immediately all the screen readers say, but it’s so open to abuse. I don’t want my thing yelling at me just,
every time an adverts on a page. If we want equality, that kind of means we
have to put up with the dreadful audio experience. Like everyone else gets the dread youthful
vision, right? [laughter]. It’s also, I’ll be curious, interesting to
hear you say that. Because I’ve been going through it in my head. I think for some, you know, users that use
screen readers, that’s their voice. That’s their normal, their everyday, regular,
manipulating that without their concept. Is that an unethical thing to do? I like the idea if it’s inoperable, you can’t
opt into it. To your point, it’s right for abuse, I guess. I don’t know. I also think you shouldn’t fear the future. Right. And I think making it opt in and opt out,
giving people the choice, that would be a big part of the solution. If we were to see more implementation. But I like listen in the same voice. But a variation could make a difference. Leonie, you reminded me of something. There’s– we see a lot of times in audits
that Iframes that don’t have titles, maybe we could have– those i frames are always
going to be advertisement and stuff. Maybe if we have a role equals advertisement. That way, you know– [laughter] you can really
invest in– Then we can hide the advertising. [Speakers Overlapping] This is what I’m getting at, I get George
just to ignore inline frames with pages with a lot of advertising. Just go away. It’s lovely. And you never see it again once you do it. It’s great. Yeah, that’s it. The thing that I think– the key is to give
the user the capability of doing this stuff. And I think as long as you give them the capability
of doing it, the example you gave, Eric was, we don’t want to necessarily hear the word
link after every link or graphic after every graphic. So as long as we can, as long as we can actually
be able to tag, you know, sounds and voices based on what our preferences is, you know
we can have a different pitch, a different voice. I think that’s the key. Give them the power to do it. As long as we’re using traditional technology,
we should be able to do it. Another thing– sorry. Eric go ahead. I was going to say, as we move into the era
of speech interfaces, you know, Google home, Microsoft just released– apple just announced
one, too, voice interface design, voice interface design is going to get more and more interesting. Yeah. It’s interesting, like, I just, you know,
in my day job, I just wrapped up a chat box project. And like there’s a ton of nuance. And I think, what’s interesting, one of the
things I did do is go back to the screen reader. What are the lessons here I can learn? What problems have already been solved many,
many years ago, repeatedly? It was nice to bridge the two. yeah, that’s great. I love the idea that CSS can be lifted out
to purely visual design into audio design as well. That’s exciting. It’s getting there. We’re slowly moving the needle. So that’s fun. I think we’re going to come to the end of
the time. I’ll– if you can recommend one thing that
people can go out there and change tomorrow to make their stuff more inclusive, what would
it be? Test. All day every day. You think you’re done testing, test some more. If you’re done testing, give it to somebody
else. Yeah, the high contrast mode stuff especially
the reduced motion, the big kind of thing I try to petition for is A, introduce it into
your testing scripts. Not like automated, but when a QA person does
it. And B, like make sure you’re in a situation
where, when you’re in these modes, you’re communicating what you need to communicate
because chances are, the browser default may not be what you want. I’m not saying, completely redo the experience. Give it a gentle nudge. What you’re communicating doesn’t have to
rely on the media you’re communicating it. All right. Eric, thank you again for the tremendous talk
for ID24. If you. Everybody else, we’re going take– we’re going
to take another 10 minute break. Time to grab tea and coffee, maybe a Thursday
night drink, we’ll be back in ten minutes with a talk from Jason Kiss.


One thought on “Designing for Inclusion with Media Queries – Eric Bailey : #ID24 2017”

  • Finally got around to watching this. To the point towards the end of the video about voice design, one interesting development is that Google has actually moved AWAY from the use of earcons – little audio "trills" to denote certain things like links, instead of actually saying the word "link". So lots of interesting discussion there. Loved the talk… thanks, Eric!

Leave a Reply

Your email address will not be published. Required fields are marked *