 So my name is Mike Gifford, I'm the president of Open Consulate Consulting and I'm going to be talking about personalization and building an accessible website. So first of all, how many people have to deal with the accessibility on a semi-regular basis in their work life? A couple of people. And has anyone had to deal with personalization? Okay, so a couple of people have to deal with personalization. So I think that the main thing, at the beginning I need to put some more detail, but first of all, the Open Consulate is another Drupal shop. I'm one of the accessibility maintainers. Me and Andrew McPherson are the two people who have been pushing the Drupal accessibility work for the last few years. And we're really excited to have people here to talk more about the next stage of accessibility. Does anyone know what this represents? This might be more relevant to people from the States. This is an education, or this is a cartonium stringing that Jim Crow lost, which is the whole idea of separate but equal, that you can create, create an experience, when the civil rights came in and there was an effort to try and say, well, you can't discriminate against black people. There was a decision to go off and say, well, let's go off and just give the black people and the people who are Latin American need to be similar to access, just not the same as the white access. And this is something that has been repeated in the web, in a modern way, because people have, they're using an effort to try and have a full featured, beautiful website for people who are sighted and used and don't have any accessibility challenges. And then you have a text-only version for those people who have accessibility challenges. And it was very much like this. It was supposed to be separate and equal, but it never was. It was never the same type of experience. And it was something that is a very poor example to go off to fall. So if anyone ever comes to you with an effort to talk about personalization, and they say, well, let's just create an accessible version for those people. Let's not try and make the main site accessible, because that's too expensive and too difficult. We'll just create an accessible version. Just keep in mind that we've done this in history before, and it doesn't end well, because there's never enough resources. It's never equal. It's always an inferior experience, and something that gets less attention. So after trying to go off and deal with the web accessibility, like that approach to web accessibility, there was an effort to try and create the web content accessibility guidelines, which started in 1998 with WCAG 1.0. In 2008, they released WCAG 2.0. And then just this last year, we had WCAG 2.1 was released. But the goal behind this initiative by the web accessibility initiative of the World Wide Web Consortium was to build a single platform, a single set of rules that you could use to go off and make your website accessible. Let's go off and create that one website to rule them all. Let's find a way to go off and to unify things into a single experience. It's a great goal, and the concepts, the principles behind the WCAG platform are great. We want to make sure that it's perceivable. We want to make sure it's understandable. We want to make sure it's operable and robust. So poor, perceivable, understandable, so perceivable, operable, understandable, robust. Those are great principles, and they're really a challenging implement. But how many people are familiar with WCAG? Laura, you are, of course. Excellent. So there's challenges with some elements of WCAG. There's hundreds of different items as part of WCAG, and there's a lot of questions in terms of how do you try and make sure you're following these principles for all of the different kinds of disabilities out there? The first one, when people think about disabilities, they think about the blind users. How would somebody who's blind navigate through such a visual medium? And you can do that using a screen reader. You can definitely navigate through and manage a well-structured content management system like Drupal. But it's not just that user case. There's people who are in low vision, there's people who are dyslexic, there are people with cognitive impairments, there are people who are dealing with mobility challenges. There's people who have multiple disabilities as well. There are people who have cerebral palsy and are also blind. There's the blind deaf population. There's people who are seniors who have different experiences and different challenges interacting with the web than people who are younger. And this is news for all of the people under 30. As we grow older, our brains change. And we're not the same as we were. You do not think, you do not observe the world in the exact same way as you did when you were 20. So some things are going to be more of a challenge, whether that's learning a complex navigation or whether it's seeing that change of blue. Whatever it is, there's going to be things that are going to be a challenge for you. And we keep forgetting this part of, because our culture is really geared for it, but aging is a huge part of, you know, as we grow older, we lose abilities until, you know, eventually, if we grow old enough, we'll have lost a whole bunch of abilities that we had when we were younger. So it's not something that's part of our culture. So, yeah, it's not as simple as that. This is a slide from the GDS, the government digital services office in London. And they have an empathy wall set up in there to try and encourage their staff and think about how different people perceive the web. So they've got glasses you can put on to sort of illustrate different visual disabilities that people can deal with. Each one of these laptops is set up with a different persona. You log in with one and it's got an extra long font size. You've got another one and there's a black and white high contrast. It's personalized to try and help other people understand what are some of the challenges that you might want to when you're navigating the web. So that's a really example, a great example of that, but there are places where these disabilities conflict with each other. And we can't necessarily take a simple example of like, one of them is people who are dyslexic generally read better if they have low contrast versus somebody who is low vision often needs high contrast. But how people read may actually be different. It might be easier for me to read with blue on yellow, which would give other people headaches. And so how do you find that happy medium that satisfies everyone? The BBC was doing some groundbreaking work on this now a decade ago. They had created a site called BBC MyWay, which allowed coax people through the process of trying to learn how to go off and customize your own browser to help users understand how to get the best out of the BBC. And again, it coaxed people to say, I can't see very well, I'm blind, I can't hear, I find words difficult. It had a widget in the top right-hand corner, so you can make it smaller or larger, you can go and change the colors on it. There's all kinds of good stuff that they had built into this because they understood that they couldn't make a single BBC website that satisfied the needs of all 56 million people in the UK. It was a bigger challenge to come up with than they could. It helped users customize their content. How many folks here are Apple users? And how many of you use dark mode? A couple of people use dark mode. Why do you use dark mode? Anyone? It's beautiful. Anyone else who has any reasons why you use dark mode? They're screening your eyes. They're screening your eyes so you can focus on the screen longer without having that glare to burn into your position. So Apple introduced this a while ago, and I think I'm there like an old iPhone, but it's now on at least their phones and their laptops, and it's something that is, it's a great idea that allows you to go up and say, what do I need to do to personalize it for my needs? What are my preferences? And that can get passed along to the browser. So you can, by using a very simple CSS media query, you can go off and set up how you want to go off and what your preference is. And the user you've got your computer set to dark mode can tell the browser, which tells the computer to go off and to display your CSS media query using a different way. So you can customize it for people who want it dark or people who want it light. So I think this is Drew's website, and he was definitely advocating for this and explaining how to customize his website to go off and work with dark mode. And there's other people who have done that as well. GearlingGuy has a blog post about this as well, and it's something that can really help people who just have a preference. It doesn't even necessarily matter for disability, but if you want to have a consistent user experience and you're jumping around between a whole bunch of different sites, then with respect to your preferences, you're going to want to spend more time on it because there's less distraction. There's less... Yeah, it's more consistent user experience as you're flipping through the web. So I've got another one coming up here, but I'm putting up some warnings so that people are... Is anyone here suffer from VIMS or visually-induced motion sickness? Vertigo? Has anyone heard about this? So this is something that a lot of people just miss, but it's... If you're somebody that suffers from VIMS, you can have... Dispressed appetite, fatigue, dizziness, nausea, vomiting, and why? Because we have these parallax integrations that we've put into our devices. This became more popular when the iPhone started adding the CS animations to that, and we started having all these people who were getting sick because of the animations that were added to their iPhones. And this is something that... There aren't that many people that are affected by VIMS, but you never want to make your users sick. I mean, it's better than actually causing them to go off and have a convulsive... If you have epilepsy, and you put a flash in the screen on them, that's worse because that could be... That could actually kill somebody. But this is a close second because with VIMS, you actually made people sick. It's kind of sad with Drupal in that we don't really have a way to test for this. So we actually talked to Charles, who's in San Francisco, and we say, hey Charles, can you look at this and see if this makes you feel a little bit off? It's not a good thing to do, but it's something that we're doing with some of our animations. And again, there's a simple media query that you can use to go off and evaluate your preferences and to determine whether or not a user wants to have reduced motion or not. And this is not something that we've built into our default systems. It's something that we'd like to go off and address better in Drupal 8 and Drupal 9 so that we can have a consistent user interface to allow users to disable the animations so that they're able to act on that more effectively. Sorry about getting people to want ice cream this early in the morning too. So yeah, conflicting guidelines. I mentioned earlier about issues with low vision, but there's other issues where we can't find a single solution or a single pattern that will work for everyone. So when we're addressing accessibility issues for our clients, we try to go off and find out more information about who are their clients. So we launched the CNID's website. So obviously we wanted to make sure that that site worked very well for screen readers like Jaws and NBDA. And we did that. We overlooked the fact that they also support a lot of low vision users that need to use ZoomText as part of their process. In our testing tools, we didn't test it beyond what the WK requirements are, but a lot of their users would actually want to have more than two times expansion or doubling the size of the site because their vision is that bad that they need to go off and have it maybe as much as 10 times enhanced over what the default comes with the website. So knowing your users is really quite important. Here's an example of dyslexia. Does anyone have trouble reading that? That's how a lot of people with dyslexia go off and or any representation of how people with dyslexia try and and see printed material. And it's really hard to go off and to read that. So it says, it doesn't matter in what order the letters in a word are the only important thing is that the first and last letter be in the right place. But it still is a nuisance to go off and to see that. This is an example of low vision. And in this case, there's a use a Chrome plugin that evaluates that simulates some of what it would look like to visit a Drupal Drupal North website. If you have particularly low vision in the center of your visual field and have some distortion outside of that. So you can see how the important to be able to zoom up more than you can with more than what's allowed for with the default Drupal North site. So this is a picture of Joe Biden. He's not a guy that invented the internet. That's apparently Gore. But yeah, not everyone scans well. And as we get older, there are things that are harder to do. As young people, we scan through websites and it's easy to sort of pick up what are the pieces that are relevant to us and be able to jump between those and be able to have us get a sense of where's the information that matters to us. As we grow older, that's much harder. Not all widgets are created equally well. So again, doing some work with CNIB, I started to look at some of the widgets that are out there to allow for personalizations of the web. There are ones like this that allow you to sort of say, here's the different letter sizes. Again, you've got plus and minus with the letter sizes and options between English and French. It's popular to have different letters of A sizes. You can sort of see that. There's some basic information. There's tools like this AT bar, which I think this is a proprietary tool that you can plug in that has some customization in that that you can add into your sites. There's other ones that gain other widgets that you can add in and include as part of your site. This is a Drupal site from AbilityNet. It's the style module. This one just allows you to change the background color and to choose between how you want that to be structured. This is from the BBC My way site. There's also this one from WordPress that just sort of says you want it to be a dark mode or light mode and to sort of change that. They have one or two options of the size of the text. This one here allows you to go up and actually use a scroll bar to go up and increase the size of the text one way or the other. They also had a neat text-to-speech option. So if you didn't have a screen reader and you wanted to be able to have the screen read to you or the text read to you, you could just use this tool to do this. People often think that the only people who use screen readers in assistive technology are blind users or low vision users, but that's actually incorrect. I think a lot of the people that use these tools are people who maybe English isn't their first language. Maybe they just can't read. There's still people who cannot read in our society and being able to go off and give them the ability to quickly read information that's on your website is a really useful thing. Again, text-to-speech is not that complicated technology. It's far less complicated than speech-to-text and we're doing speech-to-text right now. This is the Estonian website. I could talk a long time about Estonia and the neat stuff that they're doing, but again, they have the option of changing the font size but also changing the spacing. This is another thing that's really useful for dyslexic users is how do you try and increase the space between the text so that everyone can go off and see the spacing appropriately and make sure that the more space there is between the lines, the easier it is for dyslexia to go off and read. We came across this other widget that was from the inclusive design research center and this is an open source widget that was developed here in Canada by the team that's done some really groundbreaking work on accessibility out of OCAD. Is anyone here being to be the Accessibility Alley Camp Toronto, the Accessibility Conference of Toronto? It's hosted by the folks who manage that. That's where the IDRC is. It's a really great conference if people are looking for things to do next summer. This allows you to do a lot of customizations right there. It's a simple widget that is set up that allows you to go off and... Yes, you can change the font size. Absolutely. But you can also change the fonts. Again, why would you want to go off and give somebody the option to change your website How many people here love Comic Sans? Okay, two people. How many people here hate Comic Sans? More people. You tell a designer that you're going to go off and have an option to turn their beautiful theme into something that supports Comic Sans are going to be pissed with you because this is something that was popular in the 90s. What kind of amateur hour is this? But there are people who will be able to absorb information more effectively with Comic Sans than there are with any other font. Again, dyslexic users are one of those states where a lot of people who are dyslexic would prefer Comic Sans. There are other tools. There's a font called Open Dyslexic which is an open source font that allows you to go off and has some other characteristics that might be easier for some dyslexic users to read. But there are people who still prefer Comic Sans and maybe that's just because they love the 90s but it could also be that they're dyslexic or that you're allowing for a certain amount of neurodiversity for those people for whatever reason love the support font. Sorry. You also have the option to manage the line spacing. There's some other wonderful stuff that I think I can just shrink this down and show you some... If I go to the CNIB's website I can look at this and again you can click on the show preferences button. You can modify this so that you want it in dark mode. If you want it with orange text if you want it with a light contrast you can do that as well. You can also create a table of contents. So again, how do you navigate the website? So this widget will go off and take your structured content and it will break it down and say we understand the structure of your content we understand that because you've got semantic HTML in it and we'll expose that to the user because right now most websites the only people who use that structured content are bots and screen users. So it's not useful for most users. Most users don't actually inherit the advantages of having that semantic structured content. But if you create the website and you've got that set up you can give people the option to go off and expose that information and show them what is the content behind that. So you can navigate within that to be able to click to certain items and to navigate down through the website. Again, it's making the information exposing the information to users and making it easier for them to go off and access it. There's also an option to enhance the inputs. So let's make sure that you've got the links are properly underlined and bold and enhanced and make sure you've done as much as you can to make sure your form elements are highlighted properly so that you don't have to... Yeah, there's extra enhancements so that people who are navigating your website are able to go off and access it in the way that they need to go off and access the information. And then if you completely screw it up you can go off and reset it. There's also a text-to-speech plugin that's part of this and we haven't included it in this demo but it's certainly something that that is worthwhile to go off and to look at as well. So now back to the... Wrong window. Now I just need to find the right window. How hard could that be? How hard could it be to find the right window? Sorry about this. So while I'm trying to find the right window any questions? So many emails. What the... Let me just go back there. At least I'm going to present again. That's what I needed to do. Sorry about that. I'll jump back to the captions. So we have captions enabled and... So we've got some links here that can be useful for people to think about how to to get more information. The BBC MyWays is certainly a website that's worthwhile looking at. I have the links for the fluid UI implementation and the preferences framework. So again that's a useful reference for people to access. OpenConcept has also upgraded the fluid UI module so that there's a Drupal 8 module for this as well as a it's using the latest version of the fluid UI framework. There's so often times where there's updates to these JavaScript libraries and trying to maintain them and keep up with them does take a bunch of time and effort to try and organize that. And again you can see the website on the CNIB site and see that there. Something to think about when you are looking to help users personalize your site or to give people that sort of option it's important that you don't go off and hard code the CSS values into your style sheets and certainly don't go off and do inline styles because that is very difficult to override. But I should mention that there are some people that go off and do create custom style sheets for sites that set up their browser to go off and load a custom style sheet that allows them to specify whatever font and color contrast that they want. It doesn't always work particularly well. Again having the flexibility with the fluid UI module you're able to go off and identify and test certain parameters and make sure that those parameters work and that your site looks good because if you give users the option to go off and to set whatever CSS overrides they want to go over how that looks to them. Providing a UI with a wide range of options gives you the ability to go off and to test and validate that you're not keeping people to a set of you're not keeping people to a limited list of options that may limit their ability to interact with your site. The other thing is with CVS images we definitely are big fans of scalar vector graphics and I think that there's a huge opportunity here particularly to go off and provide multiple images and using CSS to go off and create that contrast as appropriate for the appropriate background. But you need to make sure that you've designed your site properly and make sure that you've incorporated the appropriate backgrounds for all of your CSS when you're implementing that because if you haven't gone through all of your iterations for color contrast for the foreground and background colors you're going to block out content that people might want to be able to interact with your website. And speaking of CVS images, I'm wearing a t-shirt now an Alley Cats t-shirt that Carrie Fisher is one of the people behind that. And it's a fundraiser for various accessibility events and issues. But Carrie's also got a really good article on SVG images and how to go off and make SVG images accessible. They're quite an interesting relatively new type but they're not as common as they like them to be in terms of making sure that you've got a very performant website and a lot of semantic information built into that. So that's all I've got right now as far as the formal presentation. And has anyone used the Fluid UI module before or heard of it? No? Any other widgets that people have used that they like? Laura, do you have any widgets favorites? I don't know if I have any widget favorites. Yeah, I wanted to ask you a question. Sure. I was just wondering if in the future, if you potentially see a time when people could save their preferences to the browser and we could just go and grab preferences from the browser. We can't already from Dartmouth, right? So that's already there for Dartmouth. It's just not there for everything. But there's also a reasonable floor initiative of GE Triple I, I think. If you're trying to go out and set up a standard sort of place to store and organize those preferences that you can save your information on a browser but in a central website and that when you load the site it queries a central server to go out and say just like the there's one for icons for image icons. It's a WordPress tool that allows you to have a consistent user icon across all kinds of different social media platforms. They're hoping to do the same kind of thing. I haven't seen a lot of progress in that but it's definitely something that I think we need to get towards because as people are expecting to have more of a personal experience and are expecting to be able to say well, I've got my computer set so that dark mode is enabled and that's I don't want to have any animations and I've defined that very clearly why isn't your website respect my needs and why do I like to struggle with this? Yeah. How much supported are some of those new media queries by the major browsers? I think that the prefers reduced motion is reasonably well supported I think the prefers dark mode is not as well supported I haven't looked at them recently on can I use which is generally where I go to to find out what is supported by what browsers but it is a matter of time and they might as often there may be various different options of people various different iterations where Firefox wants to do it this way Chrome wants to do it that way who the heck uses Safari anyways but any Safari users that have pissed off here okay I want a Safari user but on the flip side on the complementary side how well known are these preferences by end users these are pretty new innovative capabilities do people even know they're out there that can help them? Well I mean everyone reads Dree's blog right? So there it is I agree that education is a huge part of the problem and making sure that people that this information is discoverable and meaningful as a whole other challenge and how do you communicate to users that there's a preference that they can set up that is with their own browser or with their laptop that will carry over to not just one website but to multiple websites and even like this there's stuff that people aren't already aware of like language preferences you can sniff that information from the browser and the number of times they've gone to government websites and say you can skip this stupid English French page because it's a waste of time the browser knows what the preference is of that user and it will spit them up to just display the homepage in whatever language the browser says and then after that then you can if it's wrong, if the user is browsing on somebody else's browser and it's in French and they want to go up and see it in English there's a prominent button right hand side that allows you to go to English it's a solvable problem and still the bureaucracy wants to have a landing page with a boring dimension they realize you've got five clicks and one of them is on the stupid welcome page there's still that mindset that it needs to be brought home to people but it's I'm not sure I'm going to try to speak at conferences like this and talk about this with our clients and to raise awareness about what is the technology that's embedded in the systems and to hopefully that people learn that there are options whether it's from widgets like the fluid UI module that can be included in the presentation as the website to give more information I had asked them to go off and try and sniff the preferred dark mode in that so that this widget should allow you to automatically choose a dark screen if you've picked that in your browser you shouldn't have to also select that in the widgets right that makes sense but the fluid UI team hasn't brought that into their product yet and again it's an open source product if I had the time I would do that but I don't have the time WCAG is that a Canadian specific thing no and then who in Canada is required to use it good question WCAG 2.0 is a requirement that's basically the biggest international standard and the worldwide web consortium is behind that and the latest version is WCAG 2.1 if you're building sites for clients in Europe you need to go off and build to WCAG 2.1 the standard in Canada is still WCAG 2.0 and although it depends on the industry and what you're building for we were talking earlier about the Accessible Canada Act so the Accessible Canada Act is a really interesting set of legislation which is going to receive royal assent and become law in the next when is it going to become law later on this month it will become law and that will affect all federal government institutions as well as all federally regulated institutions so if you have clients that are banks if you have clients that are in the transportation sector then this matters to you because those are federally regulated industries so is telecommunications so you'll try to go off and say that standard that those industries are going to be held to and there's going to be some enforcement mechanisms around this as well is WCAG 2.0 AA and that will probably get brought up to WCAG 2.1 very shortly and WCAG 2.2 is on the way out out the door right now so we're going to have to think about how do you upgrade to the latest version of the web client and accessibility guidelines yep to implement text to speech functionality on the Google website or any website is it as simple as just adding a library or do you have to prepare or modify the site's content to be read there are I haven't actually decided this so I'm going to go based on what I have seen and looked at the fluid-wide extension for text to speech it does look like you can just go off and add adding a module to that that will then go off and add and do the text to speech interpretation without any interpretation it follows the focus of the the focus of your mouse is so we could read the paragraph module or navigate to that I don't think there's very much you have to deal with that if your site is already set up to be fairly semantic the text to speech tool should allow you to do that there are a bunch of other widgets that do allow text to speech and there's also with every operating system out there there's a a reasonably good stream reader that's built in those as well so whether that's voice over in the Mac or whether that's NBDA windows and if you've got the running and you want to pay for the tool there's JAWS as well for freedom of scientific anyone want to go off and install the U.N. module on any of your sites excellent well I'm sorry Mark I was just wondering how you're doing that so this is actually built into to Google Google slides with Chrome if you can start any Google slide right now in Chrome if you get onto the presentation layer you can see that there's an option for adding captions and I don't know how accurate it has been because I obviously haven't been reading it and hopefully you guys haven't been too distracted by the auto-caption but they really screwed up that one but it's useful for so many ways to actually help with people who are hearing impaired and make sure you're able to have at least some support for people who are either hard of hearing or just distracted and want to be able to zip back to say what was said and hopefully Kevin here was responsible for setting up the audio visuals is also working on a tool to try and to provide using similar Google speech-detects tools to have a different presentation that allows something to happen on a separate screen that also feeds into the caption of the video because ideally you'd be able to have this talk have a text file that you could then edit that has an appropriate time stance in it that would allow a human editor to sort of scroll through it and realize the places where I said Drupal but it said Uain or something like that and you'd be able to edit that file and upload it to YouTube and you'd have a fully captioned and corrected version of what was said at the meeting so that's definitely a better direction if you have that caption it's not only useful for people who are hard of hearing but it's also so many people watch videos in the washroom on the bus while they're watching a home with their better half and if you can go up and have caption built into your video you're going to get a broader audience of viewers because not many people have time to sit down and to watch and listen to and focusing on a video where if you can scroll down and read a transcript and say at 30 minutes in there's a really interesting part I want to actually listen to that part of it and I want to copy this text to go off and use this in a tweet there's so many ways to actually use this a caption system to be able to have more power over that well if there's no other questions then that's it thank you all very much