This recording, from the April 7, 2020 Community Call, contains a conversation about the accessibility features of the new theme being designed for inclusion in VuFind release 7.0.

Video is available as an mp4 download or through YouTube.

This is a raw, unprocessed transcript courtesy of YouTube.

good I want to give an update and get some feedback about the new progressive theme is what I've been calling it the new theme that's gonna be coming out with seven and kind of highlight where my priorities are and since it's fairly early in the process of turning my static design into actual v5 code the way that I build it is still very malleable so I was hoping to get some feedback so everyone here on the call and also everyone who's seeing this recording I would love to see hear your feedback on a couple different things and the best way or the most flexible way to go by handling it so to start off I haven't on this chair what I have done now I haven't managed to touch every part of you find yet but I'm slowly working on it but I wanted to show you the overall style I've gone for and highlight a few of the details of what my my priorities and my focus are on so obviously progressive will be a rewrite of the entire theme to include maximum accessibility design and also include the new features such as slots that we came up with to make you find even more accessible and even more not only for like for strict accessibility reasons but also for developers who want to do customizations and things like that so but the overall design is going to be much more easy to customize especially through CSS and I wanted to show some of the feet like some of the features and just a few the pages of what it looks like to kind of highlight some of the ideas that I've been working on to try to get this to work as correctly as possible so first of all the overall style is I'm trying to keep it to just a couple colors and I'm testing those colors extensively against CSS checkers accessibility contrast checkers to make sure that I can get as close to triple a compliant as possible if the new theme comes out of the box triple-a compliant I will become we through hopefully we can get that far and some of the ways I'm going to do that are by very carefully styling and allowing for the control the like keep our control of a bunch of different elements so I'm going to switch over to different demos show so this is the just the design demo so if it's slightly different but you see as I as I folk as I focus and tab through the page I'm trying to do a lot of keyboard accessibility is that all these menus all that still broken all the way that the the focus jumps are on the page is from important feature to important features so for example all the links are obvious things these are description lists which is a very accessible way of going down and make it very easy to navigate through the details and see what you want to these have full keyboard controls I'm using the arrow keys right now using the Aria guidelines to open and collapse all of these elements and also when you tab through and tabs from facets you facet not through every single item inside the list so even if this was open as I tap through it would just jump down to the next facet so the things like that the make interface is extremely accessible and I want to put as much of that in here as I can that's being done in two ways one is with the the keyboard functionality and others with what I'm kind of falling like false menus so for example if I if I if I reduce my screen size a little bit here I'm gonna do that with a console the the header would start to collapse we're using CSS grid now into a hamburger menu I know to Corning joke but it's made me laugh every single time to happen so so this menu to visual users is a button that you click and it opens and closes and it's very collapsible and visually closed but a screen reader doesn't necessarily care about this and a I guess more importantly a visually impaired user doesn't really mess certainly care that it opens and closes so to a screenreader this it just looks still like this even when it's collapsed it's just two links next to each other to button to button so you can choose work so the button is not is Aria hidden and the fact that the menu is open and closed is not something that's included in the Aria attributes because it doesn't really matter so much to visual user this is something I'm calling like a visual only menu this is one of the things I'm hoping can make we find a lot more accessible and a lot simpler this is another one here remove from list this toggles and opens and closes on a visual level before a a screenreader user this remove from list button is hidden and so they would just read saved in these lists removed from this list remove from that list so they get the actionable content there without having to hear any of the extra open close button madness that's part of that I would love feedback both on that overall approach to things the keyboard navigation and if there's good sources outside of the Aria documentation for that and this visual only menu but also how we implement this in the most developer forward way so right now we're thinking about doing PHP helpers where you want to make a menu like this see you can get you use a PHP View helper and so you'd say you know you'd give the content of the button a list of items with href or something like that and it would build this menu for you in PHP to make sure that it hooks up properly and has all of the needed attributes to work correctly the same thing for the JavaScript menu such keyboard mending such as this the other option that area talked about so just shame the area's not here we talked about it if nonetheless if you find some of the one before that is actually building web components now this would probably be much it's more building custom HTML elements is something that is definitely a approach that we can take but I think it'd be hard to customize but it's definitely a more modern approach for what that's worth so I guess pause here for any feedback so far but right now it's in order to create these more advanced more accessible elements we're gonna lean on PHP helpers to make sure that all of the the things are in the right place without stressing the developer too much for all the small details about different things I would also say the advantage to the PHP helper approach is that if in the future we do want to reimplementation we could seamlessly plug-in a web component in place of more complex PHP generated code as a transitional step take it by your stomach silence that this is that we're heading in the right direction yes yes I fully agree we've we've been trying to do something rather similar because by September we have to have our websites accessible and so keyboard navigation is key it seems to work very well you've demonstrated the facet collapsing and opening and the jumping from fascinating to fascinating is really nice really like that as well as the hamburger menu seems to be perfectly sensible and yes this is absolutely the right direction I think great other name resources that you're using to get the keyboard navigation Israel is there a particular library that you recommend because right now the best I found is the Aria guidelines come with example JavaScript I'm kind of transforming that into just the useful bits that we need and using it as a guideline I could I wasn't able to find a comprehensive library that handled that turned our like properly Aria labeled elements into the keyboard navigation that they suggest is something that we would definitely open source and share as a separate module if we can't find it but finding such a thing would probably finding and contributing such a project would probably be more you know a better use of time than building something from scratch and then she of course sharing that out I haven't found her Alawi yet we did the same thing which is still bit by bit and and using the examples just as you do there was I think in in boots and if earlier version of bootstrap I think there was a library that transformed such things as Corral's into area accessible elements I can they can look it up I have it somewhere and they had some general items that they introduced to non accessible websites boots on websites I think the project has been abandoned with bootstrap for but apart from that we have no library go bit by bit we have our website and catalogue tested and we just had an accessibility course with our accessibility cracks here from the library for the we call the library for the blind but there don't know what the exact term is visually impaired yeah it could be the right term and they are the accessibility tracks here and so they have to say it had the same recommendation just at the moment go through it bit by bit and the tested tested tested so they also suggested to do a full screen reader tests just as a visually impaired person would see the page read the page and have it read out to you and you come across countless tiny little things or we do we've missed so it's a hard way but I think it's a probably the only way at the moment yeah I've been using a screen reader installed I think it's the end vda screen reader I've been trying I've been using I found and I'm also trying to wrestle the Windows 10 built-in screen reader to kind of help I do also have an iPhone which has a good easy to start voiceover although I I've not I'm not used to the experience so actually controlling the screen reader so that I'm still learning but I'm going to make important passes over that I'm also in search of a tool that can take a page like this and turn it into what the screen reader would read if it just read from top to bottom that's also something that haven't quite found yet but there's there's all kinds of little small screen reader only bits that are hidden throughout this page like there's a small title label here that would match this one you know there's little bits here and there so these little these badges are rreow hidden but it reads Emre after the titles to reach the title and then says book available which just is a better way to go about it so I'm trying hard not so to create two completely different experiences but try to make the screen reader uses as least aggravating as possible do you know the wave plug-ins for Firefox I'm not sure what that's available for Chrome it's called wave like w8 oh yeah yeah okay yes I also use one axe caches a few different other ones then also through Villanova we have on our server we can hook out this way but we have access to a site improve which is another one then broken links and spell checking is its bread and butter but we have a bunch of different tools available and I'm trying to use as many as I can hopefully if I as I build it slowly and keep checking along the way it won't be that we have to solve a bunch of problems at the end it just we'll have to polish a few things and make it perfect at the end is the idea so that's exactly the same things they were suggesting so I'd improve wave use what you I also have a few questions um I also think that it's absolutely going into the right direction so I'm pretty happy to see what you already achieved and where you're going further on I just wanted to know if there is kind of a full list of all the things that you try to achieve now because we also started optimizing some of our websites for accessibility not pretty much our you find pages but some of our other sites and pretty much our goal is to have everything implemented which is set to be accessible due to the bit V standard now I do not know if if there is any standard or anything that you try to follow but this one is like yeah it's like by law and I'm not sure if it's in Europe or in in Germany for the for all the official pages of like official corporations libraries and so on and that was a like the list that we tried to implement yeah and it's also has lots lots of regulations like also for color contrasts and for image tags that needs to have a need to have always alt attributes and all kinds of stuff so I just wanted to to know which which stand that you are following and maybe I can have a look at and just see if see if there's a difference between the bit V and and the one that you're trying to implement right now the the the standard that were applying for here so we are very lucky to receive training through Villanova from the web aim team which is very very they really really know their stuff they're like the foremost experts we're very lucky and they use the WCAG or the wiki I think they called it for fun standards the web content accessibility guidelines they have a hand and not only to uh tweaking these but also helping write and make recommendations for these so when I say double-a and triple-a compliant that's because of these particular guides for each possible for each individual thing maybe not in this version by the upcoming version is that they describe something you can't seem to find a good example but they'll describe a problem like a common problem and then they'll say in order to meet double-a standard you must do this part of it in order to meet triple-a must do this part of it so for example there's the person I'm thinking of for live streaming videos if you're live streaming a talk or something like that having live captions um is what you would need for double-a compliance to mean triple-a triple-a you then also would need to like make the transcript available in plain text afterwards or have a live sign language interpreter available so the the SS standards are that we would hope that you would do this and triple-a is like if you really want to go full like full out to try to make as accessible as possible here's what you can do so usually when we're talking about the guidelines that are going to affect you fine we're talking about the contrast guidelines the header and outline guidelines and the keyboard accessibility ones but I can make a full list of goals available I'm not quite at the point where I do the pull request with the changes that I made but when I do that might be an important part of the document to include where it's like this is the progressive theme these are the goals the progressive theme is trying to meet this is how we're going about it like having all of that on the pull request and then maybe also on the wiki would be I think an important part of it so that way all contributions can kind of point towards the same goals in Germany the rule is as Maria mentioned the be ITV but that is or equals the WCAG two point one double a unless you are a state in institution if you're a state institution you have committed to meet triple age standards so basically if you were bringing defined up to a double-a standards that meets the VI TV standards in Germany that's the same that's very good to know well thank you excellent if there's no more questions at this point I want to talk just briefly about how I'm building it at this point the actual underlying code so right now I'm building all the styles in in SAS and scss I chose SAS over less because of the overall like community usage on a global level not on the view fine community but looking at things like the the state of j/s and the state of CSS staff seems to be one that's more widely used overall we also managed to recently implement a PHP compiler for SAS so now now lesson SAS are equal players on the field as far as it goes I'm still open to using less or sass or adding features or something like post CSS which would give us a lot more control but I think right now SAS is a good place to start and definitely gives us everything we need to go forward the other more low-level question that I'm still trying to figure out is since the previous view fine themes were built especially the bootstrap theme javascript has added a bunch of new features that do a lot of the things that we're doing in the Bouchon team for example in push Jeff team there's a chord do you find object and all the other bits like the like the the lightbox and the record controller and things like that are are added on to that module style where you where you can give it a name and you can pass in a function and then it calls init for you and it loads at the proper time and things like that it was a pretty good it's pretty close to what as actually come around of actual JavaScript modules now I like JavaScript modules I think they're a good way for organizing code and I think that turning the current view finds working code into JavaScript modules would be a great way to break it apart and would allow for any developers who want to use a tool like what pack to go ahead and optimize their site fairly easily without a lot of configurations the problem is I need to do more research on JavaScript modules because I don't want it to to raise the bar of how difficult it is to get into customizing you find JavaScript right now in most browsers you can only use JavaScript modules if every single bit of javascript is a module which might make small interface tweaks here and there and inline javascript more difficult to handle if they can't access the modules so I'm still working on the best ways to to load those modules and incorporate those modules and there's a chance that it may not be too too different from what we currently have working which is straightforward and understandable it just won't harness a lot of the modern browser features of like dynamic module loading if we want to get into that or things like that so right now I'm considering building thing everything as a J's module and what I might do just for the development side of it is I might go ahead and build it as J's modules in as modern JavaScript as I can and then have it compiled using something like gulp into a target language so when we file when we make the decision later down the road of okay we want to hit this level of JavaScript or use these features of JavaScript I can then switch over to working directly with the compiled code that way I can continue into development without having to wait for this decision so we decided to go infer we want to use actually like es2015 or we want to use you know the latest like version of javascript that comes out in the next two months though that decision won't slow down or completely halt development because I'll be working in a code base I'm Koka with and then from and then truly compiling into what eventually our target will be and then we go start working for the compiled code which would be all I would be committing from there so as far as overall JavaScript approach I'm definitely open to feedback this is we're early enough that's very malleable and using things like data attributes and also custom attributes such as like Aria - menu as opposed to Aria equals menu or role equals menu would allowed the JavaScript to get its hooks on Thor element and turn it into the fully keyboard accessible elements with all the right you know adding all the attributes and things like that trying to find the right balance between flexibility and conciseness and accuracy is it's a fun challenge it's a good place to be and but it also explains why in the demo right now I only have like the home page the search page and half a record via trying to build everything try to get the I'm trying to build the foundation at this point so the next so a month from now we can I can hit the ground running and get everything quickly developed are there any strong feelings about actual JavaScript construction approaches I mean my my biggest thought is it would probably pay to pick a strategy that allows you to take as much existing code as possible as a starting point and then refactor and change from there given that we have a lot of JavaScript and some of it deals with specialized features that aren't on by default that require configuration defined and like anything that will minimize the amount of stuff that gets broken and has to be rediscovered and fixed the better and of course going with that the more stuff that we can test if we're not already testing it the better I think we should think about a testing strategy for all of this as we go forward to you know do we need to rewrite all of our existing tests or is it possible to make the tests apply to multiple you know maybe with some conditionals or you know how should we approach that because the biggest risk from my perspective of having a new theme is breaking stuff because we have so many options and so many settings and so much code it's really easy for things to get lost in the shuffle and I'd like to minimize that as much as possible mmm I fully understand maps at the same time I think it's it's impossible not running into issues because as Chris just mentioned JavaScript the accessibility guys mentioned one key feature which is seems to be modal's but if he was modal's they tend to be unusable when the focus jumps out of the modal at the end so basically I have to keep the focus inside the modal as long as the modal's are open or the lightbox is open which can be done with JavaScript the probably the more difficult point is that once you close the modal the focus has to be at the point where you where the triggering element is that made you jump into the modal's so we might actually need more JavaScript because of the accessibility things and I guess it's just a bit more complicated the additional challenge of using the existing JavaScript is that one of the goals is to make you find more framework agnostic and a lot of the work is the modal is a great example was using the bootstrap like boxes and modal's to make a lot of that happen so it's not it's not a matter of building everything from scratch actually I've I really liked a particular library for modal's which I picked because it was very simple and had a lot of accessible features let me go and actually test it to see if it meets the [Music] means that one particular criteria so let me see if I can quick tabs to pop up in a model then that then the tabbing is contained inside the modal and when I close it yep the focus went back onto the button so it's not a matter of doing everything customized ourselves which what libraries it's just a matter of using micro modal which is a very small aria compliance one feature that saves us a lot of headaches finding the right components will immediately make things better so as far as like the keyboard goes we we've passed the responsibility of the keyboard control of the modal to this library that I found and finding the right library especially for especially for things that require advanced Aria keyboard control it might be something that is worth going forward yeah and also to clarify what I said I certainly have no particular attachment to any existing JavaScript code or templates I just am attached to the underlying functionality and I've found when updating things and changing things it's helpful to be able to start with the existing code and rewrite and replace it so that I if I delete everything that I've rewritten and replaced as I go then if there's some obscure feature I run across the code for it and then have to figure out what is this for and how do i reimplemented in the new environment as opposed to if I start from just a ground-up build and try to rewrite the functionality from my memory of how it works without consulting the existing previous code then I am absolutely certain to miss things maybe even really important things so I'm just advocating coming up with a strategy that really takes into account at a deep level what we've already got to be sure that it all makes its way over or if we do have to cut things and it's certainly possible there are some things we have that are nearly impossible to make more accessible we we have a community conversation about whether we still need those things at all and I also don't expect that we'll do this perfectly and things will get missed it always happens you know frequently when somebody reports a bug to me I discover that it's some obscure feature that's been broken for three years and nobody noticed so it just happens but like I say I just want to take a strategy that minimizes those kinds of problems nothing will eliminate them the one of the reasons why is going slow more slowly is that I'm trying to make sure that all the features are all the different configuration options our perspective it might be a matter of using that config files as a starting point this is not necessarily the code because some of the especially the sidebar is famously complex and famously hard to parse whereas the way I'm sharing my screens can make it difficult to show but the way that I've rewritten like this part of the record list template is much easier to figure out in parse and thing and along the lines and a lot of that is the changing of the actual HTML that it's producing but part of that is also for just realizing how I can like seeing the overall picture without the years of implementing a feature and then adding this and then adding this and then fixing this I think overall it's gonna be much readable I also figured out guidelines for making everything match across the templates of something I'm gonna use PS r2 for now but going forward trying to figure out the right you know there's there's a lot of room for opinions so adding just droplets of opinion here and there it's gonna be the strategy of over the next couple coughs I also think documenting changes as we go would be very helpful so that we can have some kind of an upgrade guide at the end of this particularly if we make sure is like changing the way things are broken down into parts so that you know the same template files no longer do the same things which certainly seems like a possibility in the sidebar which right now is chunked out into a bunch of sort of nested pieces and maybe that will change but just so we can say you know if you have this P HTML in your custom theme you're going to need to re-implement that by instead of writing this template and using these view helpers to fill this slot or you know whatever but it's easier to document document those things as you go than to figure them all out after the fact or at least usually that's the case I'll start I'll start up my dev logs again and get things and make sure the things are added correctly yeah I think I think as far as the the scope of this call goes and as far as the work that I have complete and then where I've decided to go forward I think that's reached the end of what I wanted to discuss obviously this recording is gonna go up and obviously I am this will be a months if not years long process getting everything working correctly between seven and seven one so there's still plenty of time and room for feedback and I'm always open to it there's an accessibility channel on the beef on slack where we can talk specifically about accessibility issues and concerns and techniques and also the view finds likes a good way to get a hold of us and the mailing list so there's lots of ways to give feedback I'm gonna try to get the pull request for this up over the next two weeks or so so that there's a good starting point so we can we can all see the code and see the approach and I think that's gonna be the main hub of the conversation about the theme so that's going to get wild I'm looking forward to it sounds great thank you Chris for taking the time to present this definitely thank you everyone for their excellent feedback and your attentive expectations the pressure is good it's going to mean a great thing at the end some I'm trying to focus the pressure in nice ways so let's keep this going