Accessibility Is A MovingTarget / DrupalCon North America 2021

going to get started you are at accessibility is a moving target and i want to thank drupalcon for inviting me the second year to talk about um accessibility and inclusion because i think it's a real uh a wonderful topic i am presenting today from ohlone lands outside of the san francisco bay area in hollister california my name is amy june heinlein i use she and her i am the open source community ambassador and qa engineer over at canopy studios uh i also am a co-organizer for accessibility talks along with carrie who is in the audience that's uh a l l y t a l k s where we talk about all things uh accessibility i'm a core mentor for drupal contributions so come to uh contributions all afternoons at drupalcon there will be plenty of help if you haven't contributed before they'll be mentors uh all skill levels all roles are invited to participate and i'm a member of the community working group community health team like i said i work with canopy we are hiring so um if you're interested in working with some really wonderful people um canopy designs builds and support websites for clients that want to make a positive impact today we only have 30 minutes so it's some of it's going to be kind of quick um but i'm going to talk about what is accessibility i'm going to go over some of the terms and definitions and i'm going to give them like i want to give them because it would be a disservice for beginners not to at least introduce some of these terms but i'm not going to go into them in depth because uh more of the presentation later is is what we're here for um and then i'm going to talk about a life cycle of a website designing for accessibility accessible content and then some free tools that we can use to help audit and assess our content for accessibility so i have the slide in a lot of my presentations but what does it mean to embrace accessibility it really means understanding what it is and today the context is i'm going to talk about producing rich content that can be accessible not only across digital across websites but also around digital assets and why do we design for accessibility well it's the law um but we also want to really think about having that wider base of consumers that are able to access our content according to this center for disease control nearly a quarter of americans live with a disability that's one in four or roughly 63 million people and remember as we get older we become more disabled with time you know our eyesight deteriorates our our hearing can go down but there's also situational disabilities like your mouse running out of batteries or using a smartphone or tablet in the bright sun your house could be overrun by noisy children um who are at home because of the shelter in place and you can't find your headphones you know and you really need those closed captions and of course there's those unseen disabilities as well as well you know not every disability can be seen um there's fatigue dizziness uh mental health disorders uh cognitive dysfunctions uh brain injuries you know we have to think you know beyond the hearing and vision impairments and accessibility means for everyone you know it means that everyone can readily access uh whatever it is you're offering you know in in in our real life it's you know ada you know making sure that we have uh accessible venues but it also means um your your your written content as well i have to move the transcripts because they are flickering and they're very distracting so just give me a second okay um and we have to remember most importantly that inclusion and accessibility aren't about giving special privileges to people it's about making sure that those barriers are removed in the first place i found this great quote by kate and i don't know if her name is bornstein or pornstein but she's so colorful you know she's got this tie-dye jacket and these really great nails and uh what a bright smile and and she says let's stop tolerating or accepting difference as it were so much better for not being different in the first place instead let's celebrate difference because in this world it takes a lot of guts to be different and i really like this because we really want to celebrate our uniqueness so terms and definitions i'm just going to breeze through these since i i am sure a lot of folks already know them but like i said it would be a disservice not to to um to remind folks so there's a lot of letters and a lot of numbers out there there's the ada which is the american with disabilities act it prohibits discrimination and guarantees that people who live with disabilities have the same opportunities as everyone else um to participate in everyday life in america section 508 um requires federal agencies it's a procurement procurement law so it really established the idea that federal agencies need to maintain and use information and communication that's accessible to people who live with disabilities and this is regardless or not of whether they work for the federal government bill c81 is the accessible canada act this bill aims to benefit all canadians especially those who live with disability by creating a barrier-free canada and then the w3c which is the world wide web consortium it's an international community that open that uh really develops the guidelines and ensures the quality and growth of the web so web content accessibility guidelines or wic or weak you know wcag its goal is to provide a shared source of guidelines for web content and accessibility um it's intended for uh web content developers uh web authoring tool developers web accessibility evaluation tool developers and really anyone who needs that standard for web accessibility and i just want to mention this that accessibility user experience and inclusion are very different things um they complement each other but they're very different so we have wic cag 2.0 it's a collection of 40 guidelines that improve usability based on different abilities and you may have heard of this it's called poor which is perceivable operable understandable and robust perceivability means that the user can identify content and with in the elements in in the interface by means of the senses operable means that the user can successfully use controls like buttons navigation and other necessary interactive elements the u is for understandable um being able to comprehend the content and learn and remember how to use the interface and then robust we should be able to choose the technology um in which we want to interact with the web you know and our digital assets including you know online documents pdf multimedia um uh not only websites and you know to break down poor a little bit more you know what makes content accessible you know it's those four broad parameters make it easy to see so you accommodate visual needs you want to make sure it's easy to interact with you know accommodating people's motor needs you know some people are unable to operate a mouse therefore you know multimedia content should be delivered in players or in a medium where they can be operated with the keyboard alone for example and that controls are properly labeled so that they're announced you know if people are using screen readers or they can be operated effectively by let's say speech input devices auditory needs you know you want to make it easy to hear so you accommodate auditory needs you know some people are just unable to hear audio um and there's audio all over the place you know there's recorded lectures and podcasts and they should really be accompanied with transcripts and video and videos should be provided with closed captioning as well and then the last one is make it easy to understand um so you accommodate folks's cognitive needs we want to make the experience as equivalent as possible across all the websites and digital assets regardless of things you can't control like browsers and operating systems so digging a little bit deeper into wic you know wig cag 2.1 um this had everything that wig cag 2.0 had to offer plus 17 new items a couple of them i have up on the screen are considerations for line height orientation color contrast of non-text and then wig cag is broken down even further um into three levels the a the double a and the a each increasing a um indicates an additional set of criteria to follow so level a is really about minimal compliance if your website doesn't meet this this level then it means that it's really difficult for people to with disabilities to use your site double a is sort of this acceptable criteria um acceptable compliance it means that your website is usable and understandable for a lot of people and then the aaa this is your optimal compliance which means that your website is accessible to the maximum number of users with or without disabilities so this aaa really indicates the highest level of usability and the more you get into accessibility the more you realize that accessibility and usability really do come hand in hand um when we talk about 508 compliance we're usually talking about the double a compliant level so you know the name of my talk is you know accessibility is a moving target i want to talk about what's sort of on the horizon next so along with 2.0 and 2.1 there's 2.2 um which was a working draft in august of 2020 and it was initiated with the goal to continue the work of 2.1 it really wants to improve accessibility guidance um for three major groups users with cognitive or learning disabilities users with low vision and users with disabilities on mobile devices so it has everything that 2.1 had to offer plus nine items and i'm not going to go into the individual guidelines because i really want to stress that no matter what guidelines are coming it's our responsibility as web designers and coders and developers and content authors and editors to know what's coming next um or anyone who cares about digital accessibility it's important to keep track and know about them and even though um these criteria are only in draft they're important enough for someone to list them so even if some of the the draft doesn't come to fruition it was important enough for someone to put in to a draft um so kind of moving past that the accessibility guidelines working group recommends that most of us and all of our sites should adopt 2.2 as our new conformance target um even if it isn't formalized yet because it provides accessibility and usability and it really and sort of moves forward for those forward policy changes okay so there's 3.0 now too this specification is a is a rather new model and a new set of guidelines to make the our web content applications accessible uh and support a wider set of needs you know it provides new guidelines for approaches to testing and um allows frequent maintenance of guidelines and related content to keep up with technology as it changes um and what 2.2 and 3.0 do is it kind of changes things up a bit about the way we think about the guidelines you know taking into account more disabilities thinking more about cognitive disabilities moving forward and that's something that wasn't really considered too much before um we want to be able to apply more technologies than just the web and these guidelines are opening up that space as well for things like virtual reality uh augmented reality and voice assistant things like that and then we want to consider all the technologies that people use including web authoring tools browsers and media players it really expands the scope of current guidelines it it really comes down to that accessibility is not static um it's dynamic and it's never really done it's always changing and we need good sources of information in our tool belts this can be attending conferences online meetups subscribing to newsletters you know really doing your research and finding the information sources that are the most credible sources of information and sort of adding them to your daily or weekly reading list i put two up here from the w3c because they are sort of the first source of information usually they have a blog and they have a twitter feed but whatever method of content delivery you prefer they'll have resources for accessibility you just need to curate them and be dedicated to seeking out the information so user agents um this is assistive technology or at um it's any device or software or equipment that helps people work around challenges they have in learning and communicating and functioning on the web so that's assistive technology screen readers they're used to listen to the content of a web page they really convert speech to tech or text to speech sorry and we should keep in mind screen readers can be used along with visuals on the web page for folks who live with cognitive challenges as well they're not just for people with low or no vision alternative input devices you know this is uh basically an alternative to the typical mouse and keyboard interaction for users with physical or cognitive impairments they can include head pointers motion tracking or eye tracking large print and tactile keyboards single switch entry devices speech input software the picture up here is a refreshable braille display screen magnification software i don't know if it's just me but it seems like websites are getting smaller and smaller and the fonts are getting smaller and smaller as well and i'm always having to hit the command plus plus plus a few times um and screen magnification is true to its name um it's used to enlarge the screen content so it's easier for us to read especially if we live with partial site impairment it's used for people with partial um site impairment to enlarge the content but also screen magnifiers um have uh text to speech functionality as well sometimes um so i'm just gonna kind of breeze through some um assistive technology that folks might not be accustomed to um i'm a nurse by trade i'm a hospice nurse and work with quadriplegics and so um i have first-hand uh knowledge so sometimes it's easy for me to forget that some people aren't familiar with devices that some people use to access uh digital uh uh or to access websites so eye tracking this is sometimes called eye gaze it's a a system that monitors eye movement and it helps control the mouse pointer and detects blinking to initiate my mouse clicks there are accelerators um this software helps reduce the effort needed to type or click keyboard customization you know this includes mapping of keys it can be assigning shortcut keys to functions setting filters adding sticky keys to support single hand typing pop-up and animation blockers you know these are web browser plugins or other software that stop that automated pop-up window or redirection and it can some of them can provide options to stop pause and hide animations as well refreshable braille display that's that picture we saw on the previous slide it's a mechanical terminal that displays a line of braille and the characters the dots raise up dynamically it raises and lowers the dots and reading assistance this is software that changes the presentation of the content um and provides other functionality to make it more readable and these can include things like customizing your font size scanning the text for complex words and maybe linking to glossaries and tool tips they can hide less relevant parts of the content like sidebars or heading areas that can be distracting and sometimes some of these reading assistants will read the content out loud and highlight the text as it's being read as well and then the last one i'm going to talk about are page maps which is really it displays a small image of the entire web page with a and it indicates and highlights what part of the web page is currently being viewed user agents um we're going to roll the dice with some of these user agents that i just talked about um there are so many different combinations of browsers and devices and ways to access information you when it comes down to testing it you really need to be creative and empathetic about what challenges people might have and what software they're using um blindfold your blindfolds yourself hide your mouse you know turn your contrast really low um so i'm gonna give one example um because we're short on time so just one example okay i'm on the caltrain because i live in the san francisco bay area it's in the winter um i'm traveling to san jose to maybe uh meet meet up in san francisco for the san francisco drupal users group so i'm on my cell phone you know i need websites to be responsive and not limit my screen orientation to you know to landscape or portrait i need there to only be one scroll bar because i can't navigate side to side and vertically at the same time the train is packed you know it's standing room only i want to watch my favorite movie but cannot reach my headphones because they're in my backpack and someone's behind me so i want to utilize closed captioning so i can understand what's going on in this dr who flick um but remember it's winter and it's probably raining and i had too much coffee and i'm a bit shaky and i've dropped my phone so my screen is cracked you know that touch target needs to be large enough for me to activate without the crack getting in the way you know all different types of things you know on a desktop i might have the css and the images disabled and i'm navigating you know the site by keyboard only i want to be sure i don't miss out on any important visuals that are important to context and content you know again just a roll of the dice so life cycle of a website i want to pause and talk about how all of our communities need to stand up against racism racism like the asian american pacific islander group have really violence towards these groups have really raised towards during the pandemic so i invite folks to check out this hashtag on twitter or go to the website up here and find out more information about how you can help and that's stop aapi hate or um the website is stop aapihate.org what's the typical life cycle of a website you know we drop our wireframes and we do research while getting our stakeholder input then the research gets passed to the user experience and design team then the developers get involved in the qa process or the qa person may add placeholder content because it's hard to test your site with with and how your site functions if there's nothing in there then there's stakeholder handoff and the site is sort of popped out on the other side leaving the content creators and the editors to finish off the site before launch so this is sort of that linear you know life cycle of the website with that i want to talk about our roles and responsibilities because all of those tasks that are listed in that life cycle have people assigned roles you know they perform tasks there's designers there's front-end developers back-end developers our qa people our product owners our editors along with so many others we need to make sure that we're giving all of our roles accessibility responsibilities that means having cross-functional teams i attended a session a few weeks ago at axecon with glenda sims from decube and she said that when they're testing their websites she said that two-thirds of the issues that the queue finds on their websites could have been resolved at the design phase that was one of the first phases right so it went through all of those other phases you know um before it got caught if the accessibility discussion starts with the wireframes and the developers and the designers can weigh in at the same time there's not that much to fix before stakeholder handoff or at time of launch we really need to think about empowering our designers and the people who do research to imagine accessibility in mind you know from the start fixing an issue in production is so much more complicated than in the design phase and we also have to think about our editors and content creators you know we need to empower them and set them up for success we train our designers we train our coders and it really comes down to training everyone on your team including those content folks you know they are in the website way longer than us after handoff they are in their day-to-day after the developers and coders are done with the website so we really need to make sure that everyone is involved in the accessibility uh process now i want to reimagine the life cycle of the build you know where you start with the wireframes and that sort of thing you know in that linear form and let's inject testing at the wireframe and research level you know test our designs as they go from sketch to user experience you know for usability you know test and audit the development phase while placeholder content is added and then when we test for accessibility at all of the different phases of development or better yet we bake the accessibility into our websites from the beginning it really alleviates some of those headaches later on let's reimagine again the life cycle once more and take it from linear to circular you know this process is a form of continuous website improvement we need to remember that accessibility is never done we want to make sure that we strategize and develop in a style that allows flexible changes as the guidelines evolve i'm going to say that again we want to develop in a style that allows flexible changes as guidelines evolve because we know that the guidelines change over time we want to make sure that our solutions have impact you know we want to create and implement best practices and do it iteratively have retrospectives with the team you know make sure that our solutions have impact that's a really important part we want to learn as we iterate we want to understand what works through the cycle and what doesn't you know that's where those retrospectives really come into play do you have accessibility reviews and audits it's just just like going uphill in a 36 horsepower volkswagen bug you know like let's say a 1957 bug you know it's really hard but once you get the momentum and it keeps you going so that learning and iterating you know that continuous website improvement it can really be a challenge at first but once you get the wheel spinning you can you can gain that traction and momentum so designing for accessibility um design and content creation uh are can be similar but they happen at way different uh uh times of the website's life you know design is usually before launch you know content can happen at all phases so i just want to go over a few design aspects we'll concentrate on content next and i am almost out of time so i'm just going to kind of breeze through these we want to make sure that we use visual and semantic space space is an important visual tool that helps us identify groups of related content we want to make sure we provide enough space between lines of text make sure you use clean topography avoid all caps um readability is greatly reduced when when all caps because the words have a uniform rectangular shape and people can no longer identify words by shape don't underline text reserve this for links use left align text a consistent margin helps readability don't use two spaces after a period and support text resizing because we want to make sure our content responds to enlarged text i'm going to go a little bit into accessible content your codes accessible but what happens over time when content is added especially when you have complicated wysiwygs where people are able to inject all different kinds of things um know your audience this is pretty important you know fit your language to your audience and content you know stick to predetermined reading levels you know put your information in logical order with the most important details first provide alt text you know the purpose is to describe images for those who are unable to see them this is not only for screen readers but for me living rurally i might have images turned off in my browser and i really need that alt text to know what's going on familiar language you know really make sure you use words and combination of words that people understand uh avoid jargon and buzzwords it's unlikely to be clear often these words are really general um be consistent with the words you use you know if you refer to a person once refer to them as the same thing throughout the page be careful using symbols and rare characters like ampersands or percents because some folks might not be familiar with them be especially careful when using acronyms and abbreviations or numerous you know make sure you provide a key or a legend for them you know the first time you use it and it's introduced and remember um you want to make sure when you use familiar language it's easily searchable and will often gain you a better seo ranking you know the words you use in your copy should reflect the words that people use when they enter that they enter into search engines plain language you know language that's difficult to read and understand is a barrier for people who may have cognitive disabilities low reading literacy or people who the topic is unfamiliar to them so make sure um that you write in a way that people can understand um this benefits people who use english as a second language as well sentence length and paragraph in general keep words sentences and paragraphs short this makes it easier to read and easier to parse information and i have a list of testing tools i don't need to go into them because we are at time um but these are some free tools um that i want to share you know screen readers you know these are uh for blind and visually impaired folks there's the wave extension tool that has one click functionality um the axe is a browser extension available in the inspector window excuse me lighthouse is also in the inspector window it's an open source automated tool for improving uh the quality of web pages not only accessibility but seo as well keyboard this is super important all functionality must be usable with the keyboard people should be able to move between links forms buttons and any other interactive element with just keystrokes alone websites should not require a mouse for example you have a pop-up calendar people should be able to enter the date in there web aim color contrast is a free website that um helps you determine the accuracy and clarity of the text and the contracts of visual elements site improve accessibility checker there's two of them this one i like a lot because um it's a browser-based extension it tells you uh what's wrong but it also tells you potential warnings that you should manually check for too and the the accessibility project checklist is uh uh really is based on the web content accessibility guidelines you know because remember that's that shared uh content for the shared guidelines for everybody zoom plus 200 percent make sure that your text is uh is adjustable and can still be clearly read when when people enlarge it an important characteristic of an accessible page is that it's free of syntax problems so please do some css and html validation the readability tool by web fx takes text on your web page and gives it a score for the most used readability indicators it's nice if you you know have your target audiences and then i have a link to the tools and like i said i talk a lot so i knew there wouldn't be time for q a so for folks who have some questions you can find me at the pantheon booth in the expo hall at 1pm eastern time and thank you um it's always nice to see people even though i just see your names like go through the um the chat and i will uh easy out of the box initiative meeting rights right now that's what that alarm is sorry about that um but i'll parse through the parse through the the chat and do some questions and all you know you can reach out to me across social media it's at volkswagen chick or there's a qr code right here on the screen you can connect with me on linked in thank you so much

Channel: Drupal Association

Views: 98

Rating: 5 out of 5

Keywords: drupalcon, drupal

Id: hOiPzSwzmIM

Length: 33min 13sec (1993 seconds)

Published: Fri May 28 2021