Differences

This shows you the differences between two versions of the page.

--- videos:theme_accessibility [2020/04/08 17:41] – created demiankatz
+++ videos:theme_accessibility [2020/04/08 19:41] – [Transcript] demiankatz
@@ Line 7: / Line 7: @@
 ===== Transcript =====
-// Coming soon... //
+// 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
 ---- struct data ----
 ----