Blackboard accessibility beyond Ally

now let me just get myself set up and start my timer so yes I’m just gonna give you a bit of an overview about some blackboard things in terms of accessibility beyond al I am particularly referring to the responsive theme I thought I’d set the scene by talking about these new accessibility regulations we mentioned earlier in Laura’s presentation and their global context and future directions I think there’s a lot of really interesting things going on and then to share with you some of the work I’ve been doing particularly in terms of color contrast and focus indicators and also to talk about the enhanced a t-bar I’ll be launching on a community site soon everything I’m talking about refers to the 2016 responsive theme for the original experience for learn and as Amy said it’s not particularly about the mobile app but the responsive interface does make blackboard better for use on a on a mobile device and if you’re watching this remotely you might want to close the site and press f11 to maximize the space available to see the slides because I’m talking about some legal things this is not legal advice and of course learning access ability is a journey for us all and I’m on my own stage of this journey it’s possible I’ve misunderstood something so I’m sure Lillian will correct me if I misunderstood something as well and also I hope to develop this presentation for TLC this year so do let me know anything you like they found useful or things that you’d like to see included best to contact me is by LinkedIn and just going to tell you a bit about what these regulations are so they’re introduced in 2018 is a statutory instrument the accessibility regulations and I found that there was a lot of mixed messages about what was involved these regulations so I started reading them all and all of the paperwork and I found that you really have to also look at the Equality at a Disability Discrimination Act to understand all of the language that they use and of course it comes from the European directive and when you start reading that it’s about 30 pages and quite readable compared with the UK version you see it’s actually part of their Digital Agenda for Europe and a strategy for removing barriers and they often mention the Convention on rights of persons with disabilities from the UN back in 2006 so it’s all part of quite a global movement in terms of what actual guidelines we need to be following it’s actually called standard en 301 549 which is based on the w3c the web world wide web consortiums web content accessibility guidelines which I’ll be referring to as work hack there now and those are used in lots of other pieces of legislation such as the 508 Act in America you might have heard on the news particularly with regard to Domino’s pizzas about the Americans with Disabilities Act that doesn’t actually refer to work Act but it is quite relevant at the moment and there’s now an ISO standard which uses work acts so it’s really moving on quite a lot there’s some brilliant document from JISC prepared by John Kelly that will tell you a lot more so recommend that and these slides will be available after the presentation and make sure that you’re subscribing to disks brilliant accessibility regulations mailing list which is incredibly useful the government digital service will be monitoring compliance of the regulations from about April onwards in their webpage for institutions for educational institutions they said and organizations might want to seek legal advice if they’re unsure of their position this is echoed in your sizers document the director’s cut which is incredibly good six page overview and they say that there’s the prospect of multiple institutions spending money on the same or even contradictory legal advice and that came back to me when I was reading a bit more about the Dominos case in the US where they were trying to get the Supreme Court to throw out a case against them for their website and app being inaccessible and lady whitney Quisenberry from the center for civic designs saying that dominos were effectively suing for the right to discriminate and I hope that with lots of universities taking legal advice that they don’t all end up spending a lot of money trying to justify not having to comply with the register with alleged the regulations when it probably be much more effect if just to get on and comply and make sure that we’re moving barriers to all that might experience them in accessing our services but let’s continue on our journey is a worldwide concept there’s lots of regulations coming up around the world that do similar things and there’s continual momentum for example the European accessibility act is going to come into effect from the 2815 2025 and that covers quite a few more wider areas

so there’s certainly a lot of movement in this area coming along and also the standards that we need to be following those are being updated they’re now effectively compliant with Work Act 2.1 and hopefully those who the technical write-ups will be made into the formal mandate document and the EU quite soon and what CAC is developing as well 2.2 should be out in November and the next generation of accessibility guidelines is expected to be released in 2022 so this is certainly an area which is going to be developing an awful lot who benefits from all of these regulations well hopefully everyone agrees everyone will be benefiting and you might have seen slides such as this where we not only think of permanent and temporary impairments but also situational ones which I’ll mention those a little bit later on as well some examples coming back to blackboard when we upgraded last year we wanted to implement the responsive theme and we wanted it to be both on brand using our institutional colour scheme but also compliant with the accessibility regulations and at the very least no worse than it is out of the box when provided by blackboard and the first day I’m gonna look at is color contrast two million people in the UK live of a visual impairment and almost 5 percent are color blind and we also have situational visual impairments where for example using a screen and a bright light or projector screen in a very well-lit room can be hard to see and the greater their contrast between colors we use there is the more likely we are to be able to view the materials and in terms of some of what the regulations are in terms of non-text contrast such as graphical objects like the one you see here the requirement is that there’s a contrast ratio of at least three to one so the difference between one color that you use and the color next to it has to have a ratio of three to one at least I’ll tell you a bit more about color contrast shortly that also applies for user interface components so for example where we see these icons above the course menu in blackboard this light blue is part of our institutional color scheme but it would not be sufficient for showing contrast for graphical elements whereas this darker blue color is and you can see the ratio is presented there also we need to think about text and images of text and for those we at a minimum need to satisfy a contrast ratio of at least four and a half to one and for the enhanced triple-a level it’s seven to one so where we have buttons and include text in the interface that light blue that would not be suitable but this darker blue is much more suitable that’s a much higher contrast ratio and it’s easier to see the numbers you need to remember three to one is the minimum for graphical objects 4.5 to one is the minimum to the text and seven to one is the enhanced level that’s the triple pane level how is color contrast calculated wise involves working out what the relative luminance of two colors is and then comparing them isn’t too difficult Maps you follow but usually we would use a online color checker and my favorite one at the moment is who can use calm which is set up by Corey Gilligan who’s based in Perth Australia not only will it tell you the contrast ratio your mechag rating of a color combination also tells you how those will look for people with different visual impairments and they also use talks about situational impairments so that’s my favorite one for checking out contrasts and by the way the whole topic of color contrast turned out to be quite complex and they’re looking at for the next generation of accessibility guidelines on having a whole new way of calculating it it’s a very interesting thread about it on github just here but once we start implementing in blackboard we find further complexity if you’re new to customizing the theme you can see a video of the talk that Esther Sam and I gave at the TLC last year about customizing the theme so if you need to that check that presentation up now on YouTube in blackboard often we want to have the state of an icon or interface aspect change when we hover over it so we need to not only consider the color in its normal state but also when we hover and that there’s sufficient change in the colors that we can tell that we’re hovering but also that the hover State has the correct level of color contrast as well and for example in the control panel when we select users and groups to expand that area that text changes color so we need to make sure that all of the

colors are correct and have the right color contrast in the context in which the interface will put them and it can get even more complex like button 4 in blackboard is the cancel button in some areas the go button in other areas sometimes it will have a white area around it sometimes it’s within the control panel so you need to understand all of the context that your interface components will appear in if you’re thinking this is sounds all quite complicated Matt will it be easier if we just went the out-of-the-box settings well actually somebody out-of-the-box settings don’t quite meet the accessibility criteria either the edit mode the gray and the white is not quite enough color contrast to satisfy our KAG you can pretty much immediately see from this receipt message that the contrast isn’t great that would also fail and just recently in blackboard roadmap they showed this example of their enhanced Grade Center which shows a lot of quite poor color control issues as well so if you are completely new to this as a fantastic browser plug-in called accessibility insights which you can install into Chrome or the chromium version of edge and that will do a lot of these types of checks for you including color contrast and it’s free so I really recommend installing that and having a go around your university websites and your services and so on now when we were implementing the responsive theme we wanted to use our institutional color scheme I’m sure most institutions have an international brand or color scheme like this and at first we were looking them up individually which is quite onerous and after a while I decided I would have a go at making a big matrix that listed all of the possible colors in our institutional brand and when they were combined whether they would satisfy Double A or Triple A or graphical criteria under what CAC and because I made this as a script if your institution would have any value from having a similar matrix just let me know and I can set one up for you basis the contact me bar linked in it also produces examples of each color combination so you can see what they would look like which we found to be very useful to further where we went summarizing customizing colors in blackboard theme isn’t exactly simple but there is a lot of help on the community site and the presentation we gave last year but doing so does empower you to be sure that you’re using the appropriate level of contrast in all cases and while making sure that your blackboard environment matches your institutional brand and therefore looks similar to your other website so everything appears coherent to students now you might also be thinking abut map the course menus current instructors still change their color schemes even on the 2016 theme and that is true although we had reset all of the color schemes to a triple-a level users will sometimes make choices which may not always be the best choices for example there’s nothing stopping one setting on instructor setting their course menu to have quite a poor color scheme some of the things that we’ve done to try and help our students work around that as we set that when you hover with the mouse over a menu point over a course menu item the background changes to white the text changes to black and is emboldened and that way if there’s something you can’t quite read when you hover your mouse over it you will be able to read it and we’ve done the same for keyboard navigation as you tab around the menu the background color and text color will adjust so that it’s readable so in any circumstance although it might not be ideal there is always a workaround that we’ve added this information this coping strategy into our accessibility statement and talkative keyboard navigation the next thing I wanted to talk about was focus indicators these are the kind of boxes that you see around a webpage as you use keyboard navigation to navigate the page and you’ve probably all seen the Google front page from time to time and when the texts or when they when you’ve clicked into that box or selected it the focus indicator is some box shadow around the box if I press tab it would then move to this highlight search by voice and then the next tab is the Google search button so what fits wherever the focus indicator is if I press ENTER it would select about element on the webpage and keyboard navigation is not only to be used when you don’t have a mouse is also used by screen readers and of course power users love keyboard shortcuts as well and if

you use blackboard and the default theme the focus indicators are tend to be purple and they do have a good contrast ratio but you do need to make sure that if you do make any changes that your are that you are accounting for changes to the focus indicator because in the European Standard which has the workout 2.0 settings saying that focus has to be visible and in workout 2.1 they updated it to say that the visual focus indicator must have sufficient contrast like to the background so here’s some examples where as we had changed it in our blackboard environment we changed the focus indicators so that they looked good enough with the with the choices of color that we had used and had sufficient contrast ratio and that they were all adjusted and not the default purple ones so we tended to try to make them quite large and as visible as possible and if you do adjust your own blackboard theme it’s almost inevitable that you’ll have to deal with the focus indicators this for example where our default course menu has a white background if you do nothing the hover color is purple and the focus indicator color is purple which have very low contrast ratios and just to sum up it’s not just me saying that this is important when you look at most accessibility cheat sheets in art of course you will find that they one of the first things they talked about making sure you’ve got the right color contrast and also that you’ve got good focus indicators also what I said I’d also talk about is this enhanced eighty bar you might have seen on a community site I shared a Jase hack to use the eighty bar browser plug-in with blackboard I’ve since been doing some work on expanding that so that it also includes some existing blackboard accessibility features and a Help section to explain what these new icons have added are their idea is to try to normalize the availability and visibility of accessibility tools and features have not hidden away they’re easy to find and they’re coherent and consistent with our user interface I’ll be uploading this to the new community site once it’s relaunched and if you wanted to use it yourselves you’d be able to change the colors and the style and help content to suit your purposes just to explain what the items are I’ve got some animations that I’ll show at the end presentation that will kind of give a quick demo of it skip to content isn’t actually accessible by mouse on blackboard and it isn’t visible Eva it’s just the first tab and then pressing enter skip to content is very useful because it allows you to skip navigation links like the course menu can go straight into content and when you’re using the keyboard navigation that’s really helpful to be able to go straight into the content likewise Quick Links you might recognize that chain or link icon in blackboard top left corner actually started on looking at trying to make that icon a bit more coherent with the style that we were using in blackboard which is how I ended up putting this into an kannst 80 bar when you open Quick Links it sets up a section of page landmarks and headings which will make keyboard navigation much faster also the 80 bar that is unchanged from before still with the same 80 bar just to give you an overview of some of its features allows you to change font size without changing the size of images which is what would happen if you were using ctrl + ctrl – or ctrl hold down control and using the mouse wheel to change the font style line spacing line spacing is quite important for dyslexic users it’s better to have an increase in the line spacing so text-to-speech feature you could change some of the colors of texts and links and also use color overlays to reduce visual stress and the help section then explains what these extra icons are and I’ve used it not only to explain the enhanced 80 bar but also to provide links to accessibility related information like links to our mailing services team links to what assistive technology our students can download like the jaws screen reader and so on and links to how they can access our assistive technology suite and once I’ve uploaded that to the community site I look forward to hear any feedback and what I’m thinking to do next is to make a mobile version because we have fantastic presentation from Kimberly at

blackboard last last couple of months ago who said that Quick Links weren’t available in a mobile theme and so once I’ve worked out where the space will be to put this in the mobile theme I’ll try and set up the 80 bar to work with that as well you can find out more including introductory video online and that’s just a to round up I’ve tried to set the scene tell you about some of these regulations and where they are in the global context and show you a few indicators and I’ve pretty much only gone one minute over time so while you ask me any questions do remember to send me some feedback on the presentation and I’ll try and load up a few animations to show you some examples of what I’ve been talking about so thank you very much thank you might take a moment to breathe and have something to drink yeah so that was that was really interesting and it I know it’s something that would treat my all’s things you’ve applied at Southampton okay yeah so this one I’m not quite sure if you see exactly the same point as I see but it the gift will repeat so first of all which shows when you hover it the that bad menu color scheme changing and then once it’s gone through using the mouse it then shows you what it looks like using the focus indicator and using keyboard navigation so it’s much easier when you can show but because I wanted to upload my slides to be played direct in collaborate it doesn’t let you show embedded gifts so that’s why I’m showing these separately and I’ll just upload the next one that’s great thank you yeah it’s interesting to see these things in action if you’ve been following the text chat during that comment my colleague Lillian has mentioned that yes at York in particular we are quite worried is what we are Neverending you kind of deal with though with the purple focus box and the fact that subheaders for example in a billy site left-hand menu will not change from white no matter what you changed the cyclist to and things like that so it’s definitely we’ve been fighting yes I miss up header is incredibly annoying we’ve set it to be hard-coded to black text but because most of our course menus are whites have a white background but still when people want to change their colors if they want to have something where black doesn’t contrast well then they’re out of luck because it’s hard-coded so I know that there’s some improvements that blackboard are talking about in updated versions of the themes just to tell you what you’re seeing here is the focus indicator also appears when you click on something with the mouse which you’ve probably seen in general but because we’ve made these a bit larger and more visible I like to think that for users you have a slower computer or poor broadband is quite no nice to know like yes I have definitely clicked on that you get that extra visual indicator so I think it also has a an extra benefit not only for people who use keyboard navigation I’m just gonna upload the next one this is a demonstration of skip to content not sure whereabouts it starts for everyone but once it starts you tab into skip to content when you press enter immediately brings you down to where the content begins so that when you use keyboard navigation you’re straight up into the content rather than having to go through the course menu and the top tab navigation and so on and now I’m gonna just share the last one which is a demonstration of Quick Links so how this works is once you open up Quick Links it will show a list of headings on the current page and then you can use your keyboard navigation to tab through those and quickly find what you’re interested in select it and then once it’s selected it takes you direct to that page and it briefly flashes the title of the content that you had moved into so I’ll stop talking now no that’s great Matt thank you very much all very interesting I’d say yeah we’ve done counted similar problems to you but we’re very impressed with the things you implements it already anyone have any questions I can see there’s one in the chat there from Gidney about is there any way to set the style for the whole Beebe site by users that they would prefer even if limited to say five or six different options all right so you’re giving people the choice of how how to display them as themselves yeah I think I well I don’t have a way at the moment but I’ve been really getting into you using JSF at the moment and that is really good for adding extra CSS so I

think you could set that up it would take quite a lot of work to make up those different things but it is theoretically possible to do and using jess hack it shouldn’t be too difficult be a little bit of JavaScript and I’m making the CSS so I think it would be possible it’s a nice idea something to look at if I ever get time I’d definitely like to look into doing something like that and if I do I’ll let everyone at moco know about it thank you am i right in thinking that the the inbuilt accessibility features of Blackboard Learn if you student accesses them from the menu in the top right of my blackboard menu I think you’ve got the option of applying your own machines contrast settings and things there don’t you as well so rather than going and picking a certain setting I think an individual can choose to replicate their machines like a Windows operating system settings were then learn but I haven’t tested that myself Kali yeah it does let you use your operating systems high contrast mode but sometimes there sometimes you get unexpected consequences when you use those but that might also be related to any CSS changes you make as an institution compared with what that will provide out of the box but it’s not something I’ve looked at enough lately so I have tested that it works but I’ve not gone much further we’ve got a few minutes left before break timers they no longer anything else they would like to us in the room or but chilly you a second okay that’s wonderful thank you very very much for that Matt that was really really interesting and as I say we wash these recordings and slides and things post about there’s been people excitedly taking photos in the row here at Durham so yeah we will we’ll share the slides and things afterwards