Making Single Page Apps Accessible: It's easier than you think - Jess Budd - NDC Sydney 2024
Summary
TLDRThe presentation at NDC Sydney, given by J Bud, a senior software engineer, focuses on enhancing the accessibility of single page applications. The speaker discusses the inherent challenges JavaScript frameworks pose to web accessibility but emphasizes that these can be overcome with proper practices. Highlighting the principles of the Web Content Accessibility Guidelines (WCAG), Bud explains the importance of using proper HTML elements to benefit not only people with disabilities but all users, including those in challenging environments. HTML’s built-in accessibility features should be leveraged, as they ensure semantic content comprehension by assistive technologies like screen readers. The talk also covers strategies for managing focus and updating page titles in single-page apps, offering practical coding solutions. Methods to test for accessibility issues using automated and manual techniques are shared, underscoring their value despite limitations. Key insights include the value of meaningful markup, careful handling of forms, and the significance of visible focus styles. Ultimately, Bud posits that these efforts help create a web that serves a diverse range of human needs and situations.
Takeaways
- 🚀 Single page applications can be made accessible with the right techniques.
- 📝 Web accessibility benefits everyone, not just those with disabilities.
- 🌐 HTML's semantic elements are key to making accessible apps.
- 🎯 Managing focus and page titles is crucial in single-page apps.
- 🔧 Testing for accessibility requires both automated and manual methods.
- 🔍 Use proper HTML labels and linking for form fields.
- 🎨 Visible focus styles should not be removed, but customized.
- 📊 Proper HTML structure aids SEO and accessibility simultaneously.
- 🛠️ Framework knowledge helps apply accessibility techniques effectively.
- 🤝 Accessible web design connects diverse users and fulfills various needs.
Timeline
- 00:00:00 - 00:05:00
The speaker, J Bud, introduces their talk at NDC Sydney about making single page applications more accessible. They express gratitude to the audience for choosing this talk over others. As an experienced software engineer and a digital accessibility consultant, J Bud highlights the importance of accessibility, reflecting on Tim Berners-Lee's vision for a universal web. They stress that accessibility issues often arise not from technology itself but from developers lacking knowledge on making applications accessible.
- 00:05:00 - 00:10:00
Accessibility benefits not only those with disabilities but everyone, citing technologies like speech-to-text and automatic doors as examples originally designed for disability that are now widely used. The speaker explains the acronym 'A11Y' and discusses the significant portion of the population living with disabilities. They categorize disabilities into visual, auditory, motor, and cognitive, emphasizing the expected increase in these issues as people age.
- 00:10:00 - 00:15:00
The speaker introduces the Web Content Accessibility Guidelines (WCAG), breaking it down into four principles: perceivable, operable, understandable, and robust. These guidelines, updated to version 2.2, provide technical standards for accessibility. J Bud highlights three levels of adherence—A, AA, and AAA—encouraging developers to aim for a minimum of level AA to ensure they meet industry standards.
- 00:15:00 - 00:20:00
The talk transitions to HTML's role in accessibility, emphasizing that using semantic markup provides significant accessibility benefits. The speaker contrasts accessible HTML elements with 'div soup' and custom components that lack inherent accessibility features. They highlight the importance of meaningful markup for both screen readers and SEO.
- 00:20:00 - 00:25:00
J Bud emphasizes that each form input must have a linked label, explaining the importance of this connection for screen readers. They discuss using unique IDs, especially in single page applications with reusable components, and the problems with placeholders as a substitute for labels. They encourage developers to include helper text, making forms more accessible and improving usability.
- 00:25:00 - 00:30:00
Focusing on touch targets, the speaker explains how linking labels and inputs increase target areas, which benefits users with motor disabilities. They describe using HTML attributes like autocomplete to enhance input accessibility and discuss best practices for visible focus styles. The significance of focus indicators for keyboard and assistive technology users is highlighted, with a recommendation to style focus elements to improve usability.
- 00:30:00 - 00:35:00
Addressing the unique challenges of single page applications (SPAs), the speaker discusses the differences in routing between SPAs and traditional multi-page applications. They elaborate on how SPAs update parts of the page without a full refresh, which can confuse screen readers. Strategies for updating page titles and managing focus to improve accessibility in SPAs are presented, emphasizing thoughtful navigation management.
- 00:35:00 - 00:40:00
The speaker explains focus management, detailing its importance in SPAs and dynamic content updates. Options for managing focus include setting focus on page load or focusing new content directly. The speaker suggests best practices backed by research for intuitive user experience. Techniques to create accessible modals and the role of the HTML dialog element are also examined, enhancing ease of use.
- 00:40:00 - 00:45:00
The dynamic of testing accessibility is covered through both automated and manual methods. Automated tools inside code editors, such as AI-based suggestions and ESLint plugins, are recommended for early detection of accessibility issues. The speaker shares insights on leveraging tools like AXE core for deeper analysis and browser dev tools to inspect the accessibility tree, aiding in building accessible user interfaces.
- 00:45:00 - 00:52:20
In the conclusion, the speaker stresses the importance of manual testing, particularly using keyboards and screen readers to assess accessibility. They caution that automated tools only catch 20-30% of issues, highlighting the need for manual assessments. The talk concludes with a reminder that the web connects people, underpinning the vital role of developing accessible applications for diverse humans with different needs.
Mind Map
Video Q&A
What is the talk at NDC Sydney about?
The talk is about making single page applications more accessible.
Who is the speaker at this NDC Sydney session?
The speaker is J Bud, a senior software engineer at a company called Hup.
Why does the speaker believe good HTML practices are important in JavaScript frameworks?
Good HTML practices are crucial because they help maintain web accessibility and functionality, especially in a JavaScript-heavy environment.
What benefits does web accessibility provide?
Web accessibility benefits everyone, including people with disabilities, temporary impairments, and in challenging environments.
How does the speaker suggest dealing with visible focus styles in web design?
The speaker suggests replacing default focus styles with custom on-brand styles using the 'focus-visible' pseudo-class instead of removing them.
What is the significance of the Web Content Accessibility Guidelines (WCAG) discussed?
WCAG provides technical standards to ensure web platforms are accessible. They are critical when developing applications, especially if compliance is required.
Why are autocomplete and tab index properties important for form inputs?
Autocomplete and tab index properties enhance form accessibility by aiding input navigation and data entry for various users, including those with disabilities.
What challenges do single page applications pose for accessibility?
Single page applications complicate accessibility because they do not naturally trigger full page refreshes, which can hinder page title updates and keyboard focus resetting.
View more video summaries
- 00:00:06all right I think we'll get
- 00:00:08started welcome thank you for having me
- 00:00:11at NDC it's my second time at NDC Sydney
- 00:00:14first time
- 00:00:15speaking very excited to be here um to
- 00:00:19talk about single page applications and
- 00:00:21how we can make them more accessible and
- 00:00:22thank you for coming along to my talk I
- 00:00:24know that there were lots of other
- 00:00:26really good talks on in this time slot
- 00:00:28so appreciate that you are caring enough
- 00:00:30about accessibility to come and learn a
- 00:00:32bit more about it uh my name is j Bud uh
- 00:00:36I'm a senior software engineer at a sty
- 00:00:39company called hup who is an ndis
- 00:00:41registered
- 00:00:42provider since Twitter imploded uh I
- 00:00:46joined all the things so you can find me
- 00:00:48anywhere now um I'm basically just
- 00:00:50hedging my bets to see where uh The Tech
- 00:00:53Community kind of lands um but I put my
- 00:00:56handles at the bottom of all the slides
- 00:00:58so um if you'd like to reach out any
- 00:01:02platform of your choice I'll be there
- 00:01:03and I'd love to hear from
- 00:01:05you uh previously I've worked for the uh
- 00:01:09Center of inclusive design as a digital
- 00:01:11accessibility consultant so I'm a bit of
- 00:01:13an accessibility nerd uh and I'm a huge
- 00:01:16lover of Lego uh just to give you a bit
- 00:01:19of an idea of how much I love Lego this
- 00:01:21is a photo of me uh holding the Lego
- 00:01:24Masters trophy cup with the winners of
- 00:01:27season five of the Australian Lego
- 00:01:29master s does anyone watch Lego
- 00:01:31Masters yeah a few people yes yes I was
- 00:01:34so stoked um my husband says I didn't
- 00:01:37look this ched on our wedding day so I
- 00:01:40was really really
- 00:01:42chaffed um so does anyone um recognize
- 00:01:45this
- 00:01:46guy it's uh Tim burners Lee the inventor
- 00:01:50of the worldwide web uh the reason we
- 00:01:52all have jobs today uh and he had a
- 00:01:56vision of a universal web uh where
- 00:02:00everyone has equal access regardless of
- 00:02:02income regardless of location regardless
- 00:02:05of ability or disability and it's a
- 00:02:08great
- 00:02:09vision but we're kind of messing it up
- 00:02:13mostly with JavaScript HTML is generally
- 00:02:16pretty accessible out of the box uh so
- 00:02:19browsers and assisted Technologies
- 00:02:20generally know what to do with it um but
- 00:02:23since we've all started using JF
- 00:02:24JavaScript Frameworks the web has become
- 00:02:27a little less accessible but doesn't
- 00:02:30have to be that way there's nothing
- 00:02:32inherent in react or view that prevents
- 00:02:35us from building accessible web apps
- 00:02:38it's just that sometimes we as
- 00:02:39developers don't know what we need to do
- 00:02:42uh to make our apps more accessible So
- 00:02:45today we're going to talk about how we
- 00:02:46can still use all these cool Frameworks
- 00:02:48while still fulfilling Tim's vision of
- 00:02:50an accessible web for
- 00:02:52everyone can I get a show of hands uh
- 00:02:55how many people in the room are using
- 00:02:57JavaScript Frameworks either day-to-day
- 00:02:59or your side projects oh good yeah I'm
- 00:03:02glad it's so pretty much everybody I was
- 00:03:04bit worried that net crowd there
- 00:03:06wouldn't be a lot of
- 00:03:08people uh so the good news is there is
- 00:03:10something inherent in single page apps
- 00:03:12that is a plus for
- 00:03:14accessibility uh so the modularity that
- 00:03:16single page apps provide means we can
- 00:03:18build an accessible component once and
- 00:03:21then just reuse it over and over again
- 00:03:23so this is especially true if you use a
- 00:03:25design system in your organization and
- 00:03:28everything just becomes a lot easier if
- 00:03:30we can get our foundational uh
- 00:03:32components
- 00:03:34compliant so there are a lot of
- 00:03:36JavaScript Frameworks out there um a new
- 00:03:39one's probably been invented since we've
- 00:03:41been in this room um but the concepts
- 00:03:43we'll cover today should apply fairly
- 00:03:45universally uh the implementation just
- 00:03:48might vary between framework uh in this
- 00:03:50talk I'll be showing a mix of code
- 00:03:52samples from both View and react um just
- 00:03:55because those are the Frameworks that
- 00:03:56I'm most familiar with but um like I
- 00:03:58said most of the concept
- 00:04:00um are applicable to all of
- 00:04:03them and web accessibility is a big and
- 00:04:06Broad topic um but today we're going to
- 00:04:08focus on things that are generally
- 00:04:10within the control of the developer um
- 00:04:13and things that give the highest amount
- 00:04:15of impact for the lowest amount of
- 00:04:17effort some of the things we'll cover
- 00:04:19today are simple and they are easy but
- 00:04:23and they could be considered low hanging
- 00:04:24fruit but low hanging does not mean low
- 00:04:28impact uh some of the most basic changes
- 00:04:30we can make to our applications can be
- 00:04:32the difference between usable and
- 00:04:35unusable before we dive into much I just
- 00:04:38want to take a moment to set a shared
- 00:04:40understanding of what we mean when we
- 00:04:42talk about making something
- 00:04:44accessible I think the simplest
- 00:04:46definition is that web accessibility is
- 00:04:48the practice of removing barriers to
- 00:04:51using your website so making it easier
- 00:04:54for people with disabilities to consume
- 00:04:56your content to buy your product to
- 00:04:59complete the actions they came to do and
- 00:05:01get on with their day but accessibility
- 00:05:04doesn't only benefit people with
- 00:05:06disabilities it benefits all of us a lot
- 00:05:08of the things we take for granted today
- 00:05:10were first built for people with
- 00:05:12disabilities so for example Speech to
- 00:05:15Text uh SMS automatic doors and audio
- 00:05:18books were all uh designed for people
- 00:05:21with
- 00:05:22disabilities so when we design uh and
- 00:05:25build our code uh to be accessible for
- 00:05:27people with disabilities we also o help
- 00:05:30people are experiencing a temporary or
- 00:05:32situational impairment so subtitles help
- 00:05:35both your heart of hearing and de users
- 00:05:39uh as well as people who are in a loud
- 00:05:41environment sufficient color contrast
- 00:05:43helps both your low vision users as well
- 00:05:45as people who are trying to use their
- 00:05:46phone in bright
- 00:05:49sunlight around the web you might hear
- 00:05:52accessibility referred to with the
- 00:05:53acronym alley uh this term was coined
- 00:05:57because there are 11 letters between the
- 00:05:59a and the Y and accessibility I always
- 00:06:02forget to how to spell it this is really
- 00:06:03helpful for me um but also it's a bit of
- 00:06:05a mouthful to
- 00:06:07say uh according to the Australian
- 00:06:10Bureau of Statistics there were around
- 00:06:124.4 million Australians living with
- 00:06:15disability in 2018 so that's around 177%
- 00:06:19of our population or a little over one
- 00:06:21in
- 00:06:22six and I'm sure no one in this room
- 00:06:25wants to be alienating up to 17% of
- 00:06:27their users you wouldn't be here in this
- 00:06:29room if you did so let's just do a quick
- 00:06:31run through of the broad categories of
- 00:06:33disabilities we want to think about when
- 00:06:35we're creating our
- 00:06:37platforms the most well-known is
- 00:06:39probably visual you might think of blind
- 00:06:41users uh 285 million people worldwide
- 00:06:45have some kind of vision impairment um
- 00:06:47so from Full blindness to lower tunnel
- 00:06:50vision or even color
- 00:06:53blindness uh there's auditory
- 00:06:55disabilities uh one in six Australians
- 00:06:57are affected by some level of hearing
- 00:06:59impairments this can uh be as much as
- 00:07:02profound deafness or even lower levels
- 00:07:04of hearing loss um personally I'm
- 00:07:07actually included in that one in six I
- 00:07:09thought my kids were just mumbling all
- 00:07:11the time um but it turns out I actually
- 00:07:13have permanent hearing loss um most
- 00:07:16likely from listening to very loud heavy
- 00:07:18metal music in my
- 00:07:20youth um it's only the high upper
- 00:07:23frequencies I'm missing um but those
- 00:07:26frequencies are really important for um
- 00:07:28deciphering speech so it means I can
- 00:07:31have trouble understanding people in
- 00:07:32loud environments um you can't whisper
- 00:07:35secrets to me um and captions and
- 00:07:37subtitles are my
- 00:07:39friend another broad category is U motor
- 00:07:43impairments this includes a wide range
- 00:07:46of conditions that can affect a person's
- 00:07:48physical ability from loss of Limbs to
- 00:07:51Chronic arthritis or cerebal
- 00:07:53posy this group uses the widest range of
- 00:07:57assistive Technologies to access the web
- 00:07:59so that could include things like voice
- 00:08:01recognition software eye tracking head
- 00:08:03ones and adaptive keyboards to name a
- 00:08:07few and the last broad category is uh
- 00:08:10cognitive so these are disabilities that
- 00:08:12aair a person's memory attention uh
- 00:08:16learning perceptions or thoughts uh it
- 00:08:19includes conditions like intellectual
- 00:08:20impairments neurodevelopmental disorders
- 00:08:23and
- 00:08:25dementia and you might have noticed that
- 00:08:27a number of the conditions I've
- 00:08:28mentioned are commonly found in people
- 00:08:30as we age and if we're lucky we're all
- 00:08:33going to be old someday so visual and
- 00:08:35hearing deterioration plus physical and
- 00:08:38mental decline are all expected as we
- 00:08:40get older and I don't know about you but
- 00:08:42as a millennial I don't plan to stop
- 00:08:44using the web just because I get old so
- 00:08:46let's all be kind to our future selves
- 00:08:48as
- 00:08:50well if you've ever needed to make your
- 00:08:53website or app compliant which is pretty
- 00:08:55common if you work in the government or
- 00:08:57banking or health space
- 00:09:00you may have heard of the web content
- 00:09:02accessibility
- 00:09:03guidelines um it's often referred to by
- 00:09:05its acronym wiag um these are a set of
- 00:09:08guidelines created by the worldwide Web
- 00:09:10Consortium in 1995 they've been updated
- 00:09:13a few times since then um the latest
- 00:09:15version 2.2 was just released uh late
- 00:09:18last year uh and these are technical
- 00:09:20standards which platforms are measured
- 00:09:22against when being assessed for
- 00:09:24accessibility or when they're being sued
- 00:09:26for lack of accessibility
- 00:09:30the guidelines are a list of success
- 00:09:32criteria to meet with in-depth technical
- 00:09:34documentation on how to meet them it is
- 00:09:37not a light bedtime read um it but it is
- 00:09:40an excellent reference if you want to
- 00:09:42Deep dive on a specific requirement uh
- 00:09:45and different techniques on how to meet
- 00:09:47the requirement and and don't worry I
- 00:09:49know this looks super daunting um but
- 00:09:51there are like plenty of resources out
- 00:09:53there that sort of break this down into
- 00:09:55sizable easy to understand chunks um and
- 00:09:58I'll link to some of those at the end in
- 00:10:00my
- 00:10:02resources so wiag is broken down into
- 00:10:04four main principles um and often
- 00:10:08referred to with the acronym of
- 00:10:10poor P stands for perceivable so this
- 00:10:13means that information is presented in a
- 00:10:15way that can be accessed or transformed
- 00:10:18for the different sensors so for example
- 00:10:21a video having captions uh or the text
- 00:10:24added to the page as HTML instead of an
- 00:10:26image of text so assisted technology can
- 00:10:29read it
- 00:10:30out the second principle is operable so
- 00:10:33this just means your interface can be
- 00:10:35fully operated in multiple ways not just
- 00:10:37a single method like a
- 00:10:39mouse uh so examples of this include
- 00:10:42like a drag and drop interface um that
- 00:10:44also has keyboard controls or an app
- 00:10:46with a shake to win functionality that
- 00:10:48can also be activated with a
- 00:10:51tap the third principle is
- 00:10:54understandable so this relates to how
- 00:10:55the information is presented and how
- 00:10:57clear the functions are examples of this
- 00:11:00are using plain understandable English
- 00:11:03um and written descriptions of
- 00:11:04information contained in charts or
- 00:11:07graphs and the last principle is robust
- 00:11:10so you can think of robust as being
- 00:11:12similar to Progressive enhancement it's
- 00:11:14making sure all your code and
- 00:11:15functionality is supported in a variety
- 00:11:18of older browsers um and systems before
- 00:11:21adding in any optional extra touches and
- 00:11:24each of these Wick a success criteria
- 00:11:26will relate to one of these four
- 00:11:28principles
- 00:11:30wiag also has three levels of adherence
- 00:11:33uh level a this is your must-have bare
- 00:11:36minimum uh so when we don't meet this
- 00:11:39standard uh people with disabilities are
- 00:11:41likely to have trouble accessing your
- 00:11:44application or having trouble using
- 00:11:46it uh double A so this is generally what
- 00:11:50we aim for as an industry when we meet
- 00:11:52this level most people with disabilities
- 00:11:54will be able to adjust their settings to
- 00:11:57be able to use your application fairly
- 00:11:58comfortably
- 00:12:01uh and level AAA this is the highest and
- 00:12:03strictest standard of accessibility it's
- 00:12:06recommended when your primary audience
- 00:12:08is people with specific disabilities so
- 00:12:10throughout this talk I'm going to
- 00:12:12reference the specific wi ey criteria
- 00:12:14that applies to the technique we're
- 00:12:20discussing so to kick off we're going to
- 00:12:23start with HTML because meaningful
- 00:12:26markup is the foundation of an
- 00:12:27accessible website you know when I said
- 00:12:30at the beginning that HTML is pretty
- 00:12:32accessible out of the box well that's
- 00:12:36half true it is when we use the right
- 00:12:38HTML elements unfortunately good HTML
- 00:12:42has become a bit of a lost art in the
- 00:12:44days of JavaScript engineering um but
- 00:12:46getting back to these Basics will give
- 00:12:48us the biggest bang for our buck in
- 00:12:50making an accessible
- 00:12:52app meaningful or semantic markup it
- 00:12:56simply means the using the native
- 00:12:59browser elements and controls to convey
- 00:13:01the meaning purpose and structure of our
- 00:13:04content if you saw Mandy's excellent
- 00:13:06talk on Wednesday you'll know that HTML
- 00:13:09was designed with built-in meaning and
- 00:13:13functionality and to understand why the
- 00:13:15correct HTML is so important it's
- 00:13:18helpful to understand how a screen
- 00:13:20reader user uh navigates a web page so
- 00:13:24just as cited users can scan a site uh
- 00:13:27to quickly get the relevant information
- 00:13:29inform screen reader users can do a
- 00:13:31similar
- 00:13:32thing they can use what's called a rotor
- 00:13:35inside the screen reader to create lists
- 00:13:37of different information within a page
- 00:13:40cycle through them and navigate to
- 00:13:42specific items quickly for example a
- 00:13:45list of all the headings on a page uh or
- 00:13:48all of the links or buttons or Landmark
- 00:13:51roles but if we haven't use HTML in the
- 00:13:54way it's designed we actually remove
- 00:13:56that ability so people are forced to
- 00:13:58read out the ENT High web page to find
- 00:14:00what they're looking
- 00:14:02for another group that can be affected
- 00:14:05by non-semantic markup are keyboard
- 00:14:07users uh when we use elements that don't
- 00:14:09have the appropriate accessibility
- 00:14:11features built in we can prevent
- 00:14:13keyboard users from being able to access
- 00:14:15and activate those web
- 00:14:17controls and accessibility isn't the
- 00:14:19only benefit you'll get from using HTML
- 00:14:22correctly it's great for SEO as well
- 00:14:25assisted Technologies access your page
- 00:14:27in a similar way to search engine
- 00:14:29crawlers relying on the contextual
- 00:14:31information provided by the markup so
- 00:14:34for example interpreting that a H1 is
- 00:14:36the most important content on the page
- 00:14:38or that the text within an anchor limit
- 00:14:40anchor element describes the purpose and
- 00:14:43relationship of that
- 00:14:44link if a screen reader doesn't
- 00:14:47understand your content there's a good
- 00:14:49chance that Google can't
- 00:14:51either so here we've got an example of a
- 00:14:55uh inaccessible card component and I'm
- 00:14:57sure we've all seen markup like like
- 00:14:59this before we've got a rapid div for
- 00:15:01styling a heading div a paragraph div a
- 00:15:05button
- 00:15:06div this is what we affectionately call
- 00:15:09div soup uh and it's not just divs that
- 00:15:12are a problem uh in modern web
- 00:15:14development we've been given this great
- 00:15:16power to create custom human readable
- 00:15:19elements or components and what do we
- 00:15:23know comes with great
- 00:15:27power great respon
- 00:15:29responsibility so yes we can create a
- 00:15:32JavaScript component called totally
- 00:15:33awesome button but that doesn't mean we
- 00:15:35always should because these custom
- 00:15:37elements have the same effect as uh
- 00:15:39using Gibs they have no default meaning
- 00:15:42and don't pass any contextual
- 00:15:43information to the accessibility tree
- 00:15:45unless we add it ourselves so we just
- 00:15:47need to ensure we're using appro
- 00:15:49appropriate HTML elements inside of our
- 00:15:51custom
- 00:15:53components so here we've got a more
- 00:15:55accessible version of our card component
- 00:15:57where we've replaced the R A div with a
- 00:15:59list item so we can logically group this
- 00:16:02card with the other cards surrounding it
- 00:16:04we've replaced the heading div with a H2
- 00:16:07element so this will now appear in a
- 00:16:08screen readers list of uh headings for
- 00:16:11easier navigation we're now using a real
- 00:16:14paragraph uh and a real HTML button
- 00:16:17element and so let's just take a moment
- 00:16:19to uh talk about HTML buttons they're
- 00:16:23actually really amazing and Powerful so
- 00:16:25by default they're focusable by the
- 00:16:27keyboard they can submit data to a
- 00:16:30server and reset forms they can be
- 00:16:32disabled by the disabled attribute and
- 00:16:35styled by their active focus and hover
- 00:16:37States and they their role is
- 00:16:39automatically reported to the
- 00:16:40accessibility tree so let's take a look
- 00:16:43at what we need to do to make our button
- 00:16:45div accessible first we need to make it
- 00:16:48FOC focusable with the keyboard because
- 00:16:49divs aren't focusable by
- 00:16:51default then we need to give it a roll
- 00:16:53of button so assist of Technologies no
- 00:16:56uh can announce it as a button without
- 00:16:58this us screen read user may not know
- 00:17:00that this element is meant to be
- 00:17:02interacted with we'll need to add a key
- 00:17:05up or key down listener because divs
- 00:17:06have no synthetic click activation and
- 00:17:09then we also need to code JavaScript
- 00:17:11Handler to perform whatever action
- 00:17:13clicking would do uh and so we could do
- 00:17:16all this or we could use a HTML button
- 00:17:19and get that behavior built in for free
- 00:17:22so next time you need an element to do
- 00:17:24something like trigger a popup menu open
- 00:17:26a motal window toggle an interface a
- 00:17:30button is probably the right
- 00:17:33choice using HTML using appropriate HTML
- 00:17:38uh touches on a number of Wick a success
- 00:17:40criteria including info and
- 00:17:42relationships so this is about all the
- 00:17:44information that is conveyed visually so
- 00:17:47like heading styling um is also conveyed
- 00:17:51programmatically uh keyboard so this is
- 00:17:53uh pretty straightforward just saying
- 00:17:55that anything that you can do with a
- 00:17:56mouse you can also achieve with a
- 00:17:58keyboard
- 00:17:59and name roll value so this criteria
- 00:18:01relates to making sure interface
- 00:18:03components have a a name and role that
- 00:18:05can be programmatically redetermined
- 00:18:07which is what we were talking about with
- 00:18:08the button a moment ago um and you might
- 00:18:11notice that these are all level a
- 00:18:13criteria so they are really
- 00:18:17critical next let's talk about
- 00:18:21forms the internet is full of forms
- 00:18:24newsletter subscriptions contact forms
- 00:18:27product signups shopping carts you might
- 00:18:30notice that these are a lot of things
- 00:18:31that make your company money so
- 00:18:35important there are number of ways we
- 00:18:37can make our forms more accessible um
- 00:18:39the first I want to talk to about
- 00:18:41relates to form form inputs and labels
- 00:18:44and I can break it down into two simple
- 00:18:47easy rules to remember inputs must have
- 00:18:50labels and those labels must be
- 00:18:53linked here we've got a visible label
- 00:18:55which is always a good start but the
- 00:18:57label and the aren't actually linked in
- 00:19:00anyway so this means when a screen
- 00:19:01reader lands in the input the label is
- 00:19:03not announced so the screen reader will
- 00:19:06say edit text blank they'll know they're
- 00:19:09inside a text input but it's not clear
- 00:19:11what that text field is actually
- 00:19:14for contrast this with an explicitly
- 00:19:17linked label uh we do this by adding a
- 00:19:19four attribute to the label and matching
- 00:19:22ID on the input and when a screen reader
- 00:19:24lands in this input the label will
- 00:19:26announc edit text Lego character so it's
- 00:19:29now clear to the user what the input is
- 00:19:32asking
- 00:19:33for now I did say that the IDS must be
- 00:19:37unique on a page so one of the reasons
- 00:19:39we all love single page apps is being
- 00:19:41able to create and reuse modular
- 00:19:43components but this also means you won't
- 00:19:46always know what other inputs are or
- 00:19:48forms are going to be appearing on the
- 00:19:50same page so if your idea is something
- 00:19:52fairly generic like address or name it
- 00:19:55may not be the only address or name on
- 00:19:58the page
- 00:20:00um so we can get around this uh by
- 00:20:03importing a package like uu ID which
- 00:20:06generates unique identifiers for us uh
- 00:20:09we can create a variable that contain
- 00:20:11that combines a human readable name like
- 00:20:13address with a unique identifier suffix
- 00:20:16and then pass that variable into the
- 00:20:18label and input to ensure there won't be
- 00:20:20any duplicates with other inputs on the
- 00:20:24page and you might be aware of another
- 00:20:26approach where a label can be linked
- 00:20:28implicit
- 00:20:29uh this is achieved by wrapping the
- 00:20:31input inside of the label and that does
- 00:20:34sound a lot more straightforward um
- 00:20:37however this method doesn't have as good
- 00:20:38support with aist of Technologies so
- 00:20:41it's always best to explicitly link if
- 00:20:43it's
- 00:20:44possible and so what if you've been
- 00:20:46given a design and it doesn't actually
- 00:20:48have visible labels this can be a
- 00:20:50problem for people who use screen
- 00:20:52readers as well as people with cognitive
- 00:20:54impairments who might not be able to
- 00:20:55infer the information from the context
- 00:20:58it was was really common to see about 10
- 00:21:00years ago and thankfully we don't see
- 00:21:02this as much now but it does still
- 00:21:03happen not all designers are aware of
- 00:21:06how important visible labels are for
- 00:21:09accessibility so first thing I would say
- 00:21:11is have a chat with your designer most
- 00:21:13designers are very reasonable they want
- 00:21:15to have the best experience for their
- 00:21:17users um so they'll probably be pretty
- 00:21:20happy um once they once they know how
- 00:21:22important it is um to add those in but
- 00:21:25if for some reason you're getting a lot
- 00:21:27of push back or it's not possible for
- 00:21:29some reason have visible labels you as
- 00:21:31the developer still have um the power to
- 00:21:34make this more
- 00:21:35accessible so we can add a label into
- 00:21:38the HTML that is assist accessible to
- 00:21:41syst of Technology uh while hiding it
- 00:21:44visually with CSS um if you're using a
- 00:21:47CSS Library like Tailwind or bootstrap
- 00:21:50um they already have a built-in utility
- 00:21:52class for this purpose um and if not you
- 00:21:55can easily roll your own the CSS on
- 00:21:57screen is a common method of doing this
- 00:22:00uh it uses a combination of absolute
- 00:22:02positioning uh fixed height and width
- 00:22:04overflow and clip path uh it just moves
- 00:22:07the content offscreen um without
- 00:22:09affecting other elements um on the page
- 00:22:12and will still be announced by a screen
- 00:22:14reader including labels meets the wiag
- 00:22:17success criteria of labels and
- 00:22:19instructions and again you might notice
- 00:22:21that this is a level a
- 00:22:24criteria and you might be wondering
- 00:22:25about placeholder text and if there are
- 00:22:27valid alternative to labels
- 00:22:30unfortunately I'm sorry to say they are
- 00:22:32not placeholders are popular because
- 00:22:35they save space and they're minimalist
- 00:22:37however they're not accessible for a
- 00:22:39range of disabilities they're not
- 00:22:40reliably supported by different assisted
- 00:22:43Technologies so they may not be
- 00:22:44announced to the user and they can be
- 00:22:47problematic for people with cognitive
- 00:22:48impairments uh who can forget what the
- 00:22:50prompt was when they click in and it
- 00:22:53disappears they rarely have sufficient
- 00:22:55color contrast uh for people with visual
- 00:22:58impairment
- 00:22:59but if we increase that color contrast
- 00:23:02uh then we make a situation where the
- 00:23:04users might mistake the input as already
- 00:23:07being filled in um increasing the
- 00:23:09likelihood of submission errors and
- 00:23:11frustration from the user and this would
- 00:23:13be especially true of anyone who might
- 00:23:15be using um high contrast
- 00:23:18modes and so all of these reasons are
- 00:23:20also why we shouldn't be relying on
- 00:23:22placeholders for helper text helper text
- 00:23:25provides more information to users on
- 00:23:27how they fill out a specific spefic
- 00:23:28field but if the information is
- 00:23:31important enough to be included on the
- 00:23:33page it should be permanently visible
- 00:23:35and available to assist of tech by
- 00:23:37including in a paragraph text below the
- 00:23:40label which criteria this comes under
- 00:23:42does depend on the context so if not
- 00:23:45following the the helper text um is
- 00:23:48going to give the user a form validation
- 00:23:50error so for example this field only
- 00:23:52accepts nine digits that would come
- 00:23:54under labels or instructions um but if
- 00:23:57we're simply offering guidance on how
- 00:23:59the user can get a better experience but
- 00:24:01it won't stop them submitting the form
- 00:24:04this comes under the AAA criteria of
- 00:24:06help an example of that is when you're
- 00:24:09saying suggestions on how to write a
- 00:24:11good profile bio to increase the
- 00:24:14users uh chance of a successful
- 00:24:18match another benefit of linking your
- 00:24:20labels and your inputs is that it
- 00:24:22increases the size of the touch Target
- 00:24:25the touch Target when not linked is just
- 00:24:27the input itself so think a small radio
- 00:24:30button or check
- 00:24:31boox but when we link our labels at our
- 00:24:33inputs that touch Target then increases
- 00:24:36uh so that now includes all of the label
- 00:24:39area as well so imagine you're a
- 00:24:41passenger in a bumpy car which one would
- 00:24:43you rather be trying to click this
- 00:24:46increased area can make a huge
- 00:24:47difference for people uh that have
- 00:24:49troubl making prec Precision movements
- 00:24:52for example somebody with uh hand
- 00:24:54drummers and this helps us meet true
- 00:24:57success criteria Target size minimum is
- 00:25:00the double A criteria setting out a
- 00:25:02minimum Target of Target size of 24x 24
- 00:25:05pixels and then we also have the more
- 00:25:07strict AAA criteria which sets out a
- 00:25:10minimum touch Target of 44x 44
- 00:25:13pixels another way we can make our form
- 00:25:16inputs more accessible is by enabling
- 00:25:18auto complete we can do this by adding
- 00:25:21the HML auto complete attribute to the
- 00:25:24input and this encourages browsers to
- 00:25:27autofill known ANS anwers and it can
- 00:25:29also allow assistive Tech to customize
- 00:25:31the display for example showing familiar
- 00:25:33icons next to input builds to help users
- 00:25:36that might have difficulty reading like
- 00:25:38a birthday cake could be shown uh in
- 00:25:40front of an input with an auto complete
- 00:25:42of
- 00:25:43birthday and this helps us meet success
- 00:25:46criteria identify input
- 00:25:49[Music]
- 00:25:53purpose next we'll talk about uh visible
- 00:25:56Focus styles
- 00:25:58Focus indicators are the Styles applied
- 00:26:01uh to interactive elements when they
- 00:26:02receive a user's Focus to show where
- 00:26:04they are on a page they help sided
- 00:26:07people that are using a keyboard or a
- 00:26:09voice input or some other method that's
- 00:26:11not a mouse and they can help people
- 00:26:13with attention or memory issues that may
- 00:26:15get distracted and then have to come
- 00:26:17back each browser comes with its own
- 00:26:20default Focus style uh it's often a
- 00:26:22thick blue outline but uh this will vary
- 00:26:24depending on the operating system and
- 00:26:26the device that you're using
- 00:26:29ever since CSS resets became popular um
- 00:26:32in the mid 2000s there's been a tendency
- 00:26:34to remove the these defaults for
- 00:26:37consistency uh between browsers but also
- 00:26:39because they're considered ugly but
- 00:26:42removing the focus outline entirely is
- 00:26:44like removing a wheelchair ramp because
- 00:26:46it doesn't fit with the
- 00:26:47aesthetic when we remove these Focus
- 00:26:50indicators uh sighted people not using a
- 00:26:52mouse can get lost imagine you were
- 00:26:55navigating a retail website searching
- 00:26:57for a specific specific item and your
- 00:26:59mouse pointer just disappeared and to
- 00:27:01make it more difficult there were no
- 00:27:03hover styles on any of the links or
- 00:27:04buttons that's a similar to the
- 00:27:07experience of cited keyboard user when
- 00:27:09the focus indicators are missing it's a
- 00:27:11really confusing experience and there's
- 00:27:13no way of knowing when you're where you
- 00:27:15are on the page or what link or button
- 00:27:17would uh be executed if you hit
- 00:27:21enter so instead of removing the focus
- 00:27:23outlines entirely we can replace the
- 00:27:26default Focus styles with our own on
- 00:27:28brand styles with the focus visible
- 00:27:30pseudo class Focus visible only applies
- 00:27:33Styles when the browser thinks it makes
- 00:27:35sense to based on some heuristics it
- 00:27:37determines like a non-pointer input
- 00:27:40being
- 00:27:41used wiang success criteria Focus
- 00:27:44visible states that uh any interface
- 00:27:47operable with a keyboard must have a
- 00:27:49focus indicator that's visible but it
- 00:27:51doesn't actually set out any rules
- 00:27:52around how that indicator is styled uh
- 00:27:55the non-text contrast does specify a 3:1
- 00:27:59contrast ratio for interactive
- 00:28:01components and their um different states
- 00:28:04but technically you could meet that
- 00:28:06criteria by a subtle change in like
- 00:28:08background color as long as that state
- 00:28:12um has contrast with its background but
- 00:28:15that could still be really easy to miss
- 00:28:17so in uh the latest wiag 2.2 um they did
- 00:28:21add a new criteria specifically to
- 00:28:24address the focus indicator appearance
- 00:28:26in relation to its non Focus State um
- 00:28:29this is a AAA criteria so may not
- 00:28:31technically be required for your
- 00:28:33compliance but it's a really great
- 00:28:34guideline on the best practice um and
- 00:28:37how you can help a range of users and
- 00:28:39that criteria defines a minimum level of
- 00:28:41visibility for both size and contrast
- 00:28:44but it kind of boils down to make it big
- 00:28:47make it sound out the criteria says the
- 00:28:50focus indicator needs to be at least two
- 00:28:51pixels thck uh and it me needs to meet
- 00:28:53the 3:1 color contrast between the
- 00:28:55focused and the unfocused state um and
- 00:28:58although we can use different Focus
- 00:29:00styles on different elements for example
- 00:29:02we could change the background colors on
- 00:29:04buttons and add a border to Links the
- 00:29:07easiest way to achieve this is with an
- 00:29:09outline on everything and outlines are
- 00:29:11great for a couple reasons so they can
- 00:29:13be applied without causing any
- 00:29:15significant changes to those elements um
- 00:29:18which makes them simple to apply across
- 00:29:20a lot of different types of
- 00:29:22elements because the outlines aren't
- 00:29:25part of an element's Box model it won't
- 00:29:27cause any layout shift when we apply it
- 00:29:30and because outlines aren't removed by
- 00:29:32forced color mode like Windows high
- 00:29:34contrast
- 00:29:37um then we won't have the same effect as
- 00:29:40background colors and borders which can
- 00:29:42be
- 00:29:44removed another tip is to use an offset
- 00:29:47um by a few pixels adding an offset
- 00:29:50means we don't have to worry about the
- 00:29:51contrast ratio between the element and
- 00:29:53the outline making it easier to see and
- 00:29:55easier to pass
- 00:30:02the next topic is uh one of the main
- 00:30:04challenges that are really unique to
- 00:30:06single page applications and these are
- 00:30:09they are fundamental differences in how
- 00:30:11routing
- 00:30:12Works in a single page app versus a
- 00:30:15traditional multi-page app when we visit
- 00:30:17a traditional multi-page app the client
- 00:30:20sends a request to the server and the
- 00:30:22server goes to the database and gets the
- 00:30:24content and it builds out the page and
- 00:30:26sends back all the HTML CSS and
- 00:30:28JavaScript your website needs to build
- 00:30:30that
- 00:30:31page when we click a link we basically
- 00:30:33do the whole process again uh so the
- 00:30:36client sends a request to the server
- 00:30:38server builds the whole page app and it
- 00:30:40sends it over to the client and this
- 00:30:41triggers a full page refresh and when
- 00:30:44the page refreshes the page title
- 00:30:46changes and the keyboard focus is reset
- 00:30:49to the top of the page and this triggers
- 00:30:51a screen reading you to announce the new
- 00:30:53information including the new page title
- 00:30:55and the new
- 00:30:56content so contrast this with a single
- 00:30:59page application uh generally in this
- 00:31:01situation the browser sends a request to
- 00:31:03the server the server sends back a
- 00:31:05little bit of HTML and CSS and a whole
- 00:31:07ton of JavaScript and the browser then
- 00:31:10uses all this information to build out
- 00:31:12the page and render
- 00:31:13it when we click on an internal link the
- 00:31:16browser already has most of what it
- 00:31:18needs to build out the new page uh so it
- 00:31:21just asks the server for a little bit of
- 00:31:22data it needs from an
- 00:31:24API the server sends some back some data
- 00:31:27usually in in the form of some Json uh
- 00:31:29and then the browser rebuilds the
- 00:31:31component it needs
- 00:31:33itself so we're only updating uh part of
- 00:31:36the page uh so the shell and that just
- 00:31:39often the header and footer uh Remain
- 00:31:42the page title doesn't change but the
- 00:31:44component the user was on is gone um and
- 00:31:46the user Focus usually just gets dropped
- 00:31:48to whatever's beneath that so a water uh
- 00:31:52and in the case of screen reader users
- 00:31:53it's difficult to know what if anything
- 00:31:56has actually changed
- 00:31:58so we need to recreate a bit of that
- 00:32:00traditional Behavior by updating the
- 00:32:02page title and managing the keyboard
- 00:32:05Focus we'll start with updating the page
- 00:32:07title in single page apps we tend to set
- 00:32:10the value once in the global template
- 00:32:12and then don't really think about it too
- 00:32:14much again and just to be clear we're
- 00:32:16talking about the uh the document title
- 00:32:18that shows in your browser tab uh not
- 00:32:21the page heading within the Mage main
- 00:32:23page content this is the information
- 00:32:26announced by a screen reader when the
- 00:32:27page Lo
- 00:32:28so it gives context of the page we're on
- 00:32:30but it also acts as a confirmation of a
- 00:32:32change in page context so how do we
- 00:32:35update the document page title when the
- 00:32:36page itself isn't actually
- 00:32:39changing one approach is to use life
- 00:32:41cycle methods uh in combination with
- 00:32:43vanilla JavaScript uh so in a react
- 00:32:45functional component we might use the
- 00:32:47use effect hook uh in view we might use
- 00:32:50the mounted life cycle hook uh and
- 00:32:53another way we can do this in view is
- 00:32:55with its official router view router
- 00:32:57gives us the ability to specify our page
- 00:33:00meta values at the time we Define the
- 00:33:02routes uh and it also has a powerful
- 00:33:05feature called navigation guards which
- 00:33:07are functions that automatically get
- 00:33:08called before or after navigation to a
- 00:33:10route and so in this code we use the
- 00:33:12before each uh guard to set the document
- 00:33:15title to be passed in uh to pass in The
- 00:33:18Meta title or a sensible default if we
- 00:33:20haven't passed anything
- 00:33:22in another approach to updating your
- 00:33:24document title um is using a package
- 00:33:26like react helmet or view meta you might
- 00:33:29consider an approach like this if you
- 00:33:30have a lot of meta tags that need
- 00:33:32updating so for example if you've got a
- 00:33:34marketing website um maybe that needs
- 00:33:37information from a headless CMS to
- 00:33:39update a whole bunch of social media or
- 00:33:41search engine tags you might consider
- 00:33:43that
- 00:33:45approach updating the page title assist
- 00:33:47screen reader users to know where they
- 00:33:50are but it's also helpful for people
- 00:33:51with cognitive disabilities and people
- 00:33:54that tend to have multiple tabs open at
- 00:33:56a Time Imagine you had all these
- 00:33:58different email tabs open but the title
- 00:34:00was the same on each one it would be
- 00:34:02really difficult to remember which tab
- 00:34:04was for which
- 00:34:06content and so accurate and meaningful
- 00:34:09page titles uh is required under the wio
- 00:34:12criteria page title again a a single a
- 00:34:17level um so the other one we wanted to
- 00:34:19talk about was the focus management uh
- 00:34:21and focus management is when we
- 00:34:23dynamically control a users keyboard
- 00:34:25Focus programmatically so this should
- 00:34:27only be used sparingly um and generally
- 00:34:30only in response to a user's
- 00:34:32action when a user clicks a link to
- 00:34:35navigate to a new route that's a time
- 00:34:37when uh it does make sense to actively
- 00:34:39manage where that keyboard focus is
- 00:34:41going
- 00:34:42to and so there's two sort of common
- 00:34:45strategies here to consider um the first
- 00:34:47is to simulate a traditional page load
- 00:34:49by faking a regular page navigation um
- 00:34:52and that includes announcing the page to
- 00:34:54using a live region and setting focus on
- 00:34:56the body element
- 00:34:58uh the second option takes an approach
- 00:35:00that's a little more natural to the
- 00:35:02single page app Paradigm uh instead of
- 00:35:04making the application behave as a
- 00:35:06traditional app we can make the single
- 00:35:08page app more user friendly by setting
- 00:35:10Focus to where we know the user wants to
- 00:35:12go which is the new
- 00:35:15content uh there isn't a hard right or
- 00:35:17wrong choice here um but re user
- 00:35:19research by the Gatsby team suggests
- 00:35:21that option two is a little more
- 00:35:23intuitive for a broader group of users
- 00:35:25with disabilities so that's what we're
- 00:35:27going to go for this example and I'll
- 00:35:29link to their blog post about that in my
- 00:35:32resources as
- 00:35:33well now not all elements can receive
- 00:35:36focus by default generally it's limited
- 00:35:39to like links buttons form inputs um but
- 00:35:41we can manipulate the focus ability of
- 00:35:43an element using tab index and tab index
- 00:35:46has three possible States a tab index of
- 00:35:49zero uh makes an element reachable by
- 00:35:52the keyboard in the order it appears in
- 00:35:54the
- 00:35:54Dom uh a tab index of uh negative uh
- 00:35:58removes the item from the normal Focus
- 00:36:00order if it was in the normal Focus
- 00:36:02order um and it also allows us to send
- 00:36:04Focus to it if it's not normally
- 00:36:07focusable the last possible state is an
- 00:36:10index of greater than zero so one or
- 00:36:12five 10 um this jumps the item in front
- 00:36:15of the other items in the normal tab
- 00:36:17order inserts it into the order um and
- 00:36:20this is pretty much never a good idea so
- 00:36:23it's generally an i pattern I recommend
- 00:36:26you don't do it but I just mentioned it
- 00:36:27here for
- 00:36:29completeness the Gatsby research uh
- 00:36:31suggests there's a few different places
- 00:36:32we could send Focus to um including a
- 00:36:35dedicated skip link or page wrappers um
- 00:36:38but for this U I'm just going to use
- 00:36:40page heading as an example because
- 00:36:41that's I think that's the easiest pretty
- 00:36:43much every page has a H1 um it's the
- 00:36:46easiest implementation I think than
- 00:36:48adding an extra thing that wasn't
- 00:36:49already on the page um so to send
- 00:36:52keyboard Focus we're going to need to
- 00:36:54give it a H1 sorry a tab index of
- 00:36:57negative one because we want it to be
- 00:36:59focusable but we don't want it to appear
- 00:37:01in the tab
- 00:37:02order we use the react hook use ref to
- 00:37:05add a reference to The Heading uh and
- 00:37:07then we use uh the hook use effect to
- 00:37:10set focus on the H1 when the component
- 00:37:14mounts now headings aren't normally
- 00:37:16focusable and it's not standard for
- 00:37:18elements to receive focus on page load
- 00:37:20so having a visible Focus indicator in
- 00:37:23this instance is probably going to be a
- 00:37:25bit confusing um and I'll admit it
- 00:37:28doesn't look amazing either um so this
- 00:37:30is one of those rare times it is okay to
- 00:37:32remove the visible
- 00:37:35Focus another time we need to actively
- 00:37:38manage the users focus is when we're
- 00:37:40working with
- 00:37:42models when we develop models we need to
- 00:37:45do three things when the model opens we
- 00:37:49need to move keyboard Focus to it and
- 00:37:52while the model is open we need to trap
- 00:37:54keyboard Focus within it so keyboard
- 00:37:56users can't access any outside or behind
- 00:37:59the modal and when the user closes the
- 00:38:01model we need to return keyboard Focus
- 00:38:04to where it came
- 00:38:05from years ago uh Rob Dudson who is our
- 00:38:09former Google employee with a fantastic
- 00:38:11accessibility series on YouTube wrote
- 00:38:14modals are actually the boss battle at
- 00:38:16the end of
- 00:38:17accessibility and he was he was on to
- 00:38:19something because until recently making
- 00:38:21a modal accessible was really difficult
- 00:38:24and your best bet was to just use an
- 00:38:26accessibility Focus ready-built plugin
- 00:38:28then try to do it yourself thankfully it
- 00:38:31is a lot easier these days and this is
- 00:38:33thanks to uh improved browser support
- 00:38:36for the native HTML dialogue element
- 00:38:39although dialogue uh was first dropped
- 00:38:42in Chrome in 2014 it took eight years to
- 00:38:45gain support in all of the major
- 00:38:46browsers and so this actually only
- 00:38:49happened in early
- 00:38:512022 the native uh dialogue element does
- 00:38:54the three things that I already
- 00:38:55mentioned that we need modal to do to be
- 00:38:58accessible right out of the box the
- 00:39:00dialogue is opened using JavaScript
- 00:39:02using the show modal method and closed
- 00:39:05using the close method uh it can also be
- 00:39:09uh closed by hitting the Escape key this
- 00:39:11is a very standard accessibility feature
- 00:39:13expected from keyboard users and we used
- 00:39:16to have to add this in manually but now
- 00:39:18we get it for
- 00:39:19free and the dialogue element also lets
- 00:39:22you configure which element should be
- 00:39:24focused when it opens uh with the
- 00:39:26autofocus attribute
- 00:39:28so by default um it focuses the first
- 00:39:30Focus SCH element in the model but uh
- 00:39:33you might want to customize this for
- 00:39:34your use case for example if the first
- 00:39:37focusable element is a destructive
- 00:39:39action like delete you might want to
- 00:39:41autofocus the Lesser destructive action
- 00:39:44or for example if you've got a modal
- 00:39:47might be T's and c's with an accept
- 00:39:48button and they're supposed to scroll
- 00:39:50through and read the tnc's um you might
- 00:39:52want to send Focus to say the heading
- 00:39:55instead the CL method can also take an
- 00:39:58optional reference to a different return
- 00:40:01element um if there's another element
- 00:40:03that makes more sense but in most cases
- 00:40:06the default is going to be
- 00:40:08suitable the model itself can be styled
- 00:40:11with the pseudo uh selector model uh and
- 00:40:14the everything behind the model can be
- 00:40:16styled with the backdrop pseudo
- 00:40:20element uh if you need to create a
- 00:40:22custom model so if dialog doesn't work
- 00:40:24for you for some reason um it is now
- 00:40:26easier to roll your own accessible
- 00:40:28solution thanks to the introduction of
- 00:40:30anert inert is an HTML attribute that
- 00:40:33disables user input for an element and
- 00:40:35all of its children it also hides
- 00:40:38everything within the element from
- 00:40:39assisted Technologies similar to adding
- 00:40:41an ARA hidden uh or true so this is what
- 00:40:44we can add to the main element of the
- 00:40:46page uh while a custom motor is open to
- 00:40:49ensure that nothing outside or behind it
- 00:40:51can be reached and despite a polyfill
- 00:40:54foret being around for many many years
- 00:40:56it's only recently been added to the
- 00:40:58browsers and this is thanks to all the
- 00:41:00big players working together on shipping
- 00:41:02dialogue which uses an N functionality
- 00:41:04behind the
- 00:41:05scenes and so using these techniques uh
- 00:41:08helps us to meet wiad criteria Focus
- 00:41:10order which says that focusable
- 00:41:12components need to receive order focus
- 00:41:15in an order that preserves meaning and
- 00:41:19operability and so lastly we're going to
- 00:41:21finish up talking about
- 00:41:24testing there's two main categories of
- 00:41:26testing
- 00:41:28uh automated and manual so you'll notice
- 00:41:33uh this is not automated or manual this
- 00:41:36is automated and manual because they're
- 00:41:38both important pieces of the alley
- 00:41:40puzzle we'll start with automated tools
- 00:41:42that are inside our code editor and what
- 00:41:45would a tech talk be at NDC or in 2024
- 00:41:49without mentioning AI so over the last
- 00:41:52year I like many other Engineers have
- 00:41:54been uh triling AI coding assistants and
- 00:41:57GitHub recently shared a prompt you can
- 00:41:59provide their co-pilot to help you with
- 00:42:01accessibility and I'll have a link to
- 00:42:03the article in my resources which
- 00:42:05includes the prompt uh because it's
- 00:42:07really big and really long so don't feel
- 00:42:10like you have to remember it or take a
- 00:42:12screenshot because it'll be in the
- 00:42:13resources so it is a lot um but it does
- 00:42:16follow some pretty standard approaches
- 00:42:19to prompt engineering um so first we
- 00:42:21provide some solid context and
- 00:42:23background to help narrow down the scope
- 00:42:24of solutions uh then we tell co-pilot
- 00:42:27what its role is um and set expectations
- 00:42:30about what kind of feedback we're
- 00:42:31looking for and next we're telling
- 00:42:34co-pilot to reference specific resources
- 00:42:36that we know are reputable and good
- 00:42:39quality uh and then we ask for
- 00:42:41additional resources and reference
- 00:42:43partially so we can learn more also so
- 00:42:46we can verify and double check its
- 00:42:47answers it's given us because we all
- 00:42:49know sometimes AI makes stuff up that
- 00:42:52sounds very
- 00:42:53believable uh and the last one gives a
- 00:42:55final set of requirements reiterates the
- 00:42:58scope that should be considered when
- 00:42:59providing code
- 00:43:01suggestions and if you ever want to
- 00:43:03check that co-pilot is still giving
- 00:43:05answers with this prompt in scope you
- 00:43:07can just ask it to confirm so I have
- 00:43:10used this original um this prompt um and
- 00:43:13I was actually very pleasantly surprised
- 00:43:15at how well it worked everything it told
- 00:43:17me was correct so it uh this is probably
- 00:43:21a tool that would be worth adding to
- 00:43:23Your
- 00:43:24Arsenal still inside of our centure Ed a
- 00:43:27time we've got linting so most of us are
- 00:43:29probably already familiar with or
- 00:43:31already using um es lint uh an extension
- 00:43:34to this is called um eslint plug-in jsx
- 00:43:38alley have a mouthful um and it runs a
- 00:43:41static analysis of your jsx um for
- 00:43:43accessibility issues in react and these
- 00:43:45will appear as errors and warnings are
- 00:43:48just alongside all of the other ESL
- 00:43:50warnings it comes built in to create
- 00:43:52react app by default and it's got over
- 00:43:5411 million weekly downloads and you also
- 00:43:57has an equivalent plugin there's
- 00:43:59probably also equivalent plugins for
- 00:44:00angular and all of the other
- 00:44:03Frameworks so these look for around 40
- 00:44:06different issues and include common
- 00:44:07mistakes like images without Al
- 00:44:10attributes uh links without accessible
- 00:44:12uh content inside them Mouse events
- 00:44:15missing the corresponding key
- 00:44:17events so this tool can help us identify
- 00:44:20any accessibility issues inside of our
- 00:44:22template but it's not able to test any
- 00:44:24of the rendered HTML output so this is
- 00:44:27where an accessibility testing Library
- 00:44:29uh like ax core from DQ Labs comes in
- 00:44:32this is available as a wrapper for both
- 00:44:34react or view uh and accessibility
- 00:44:36issues are shown in your console and
- 00:44:38given an importance rating to help you
- 00:44:40triage the issues that it
- 00:44:42finds earlier I mentioned an
- 00:44:45accessibility tree uh so this is a lot
- 00:44:47like the document object model or Dom
- 00:44:49tree that you're probably already
- 00:44:50familiar with and browsers create the
- 00:44:53accessibility tree based off of the Dom
- 00:44:55tree and it's used used by accessibility
- 00:44:58apis um for assist of Technologies like
- 00:45:00screen readers to
- 00:45:02consume and you can inspect the
- 00:45:04accessibility Tree in your browser Dev
- 00:45:06tools um I know you can do this in
- 00:45:08Chrome and in Firefox I'm not 100% sure
- 00:45:10about other browsers because I don't
- 00:45:12really use them um report back if you
- 00:45:14know that they're any other ones uh and
- 00:45:17so in this example we're expecting a
- 00:45:19button element um so we can see the name
- 00:45:22and the role wi passed through and that
- 00:45:24it's focusable um if you were looking at
- 00:45:26a div you probably see nothing's been uh
- 00:45:29sent through and this tool can be really
- 00:45:31useful when you're developing um complex
- 00:45:34interactive components and you want to
- 00:45:35see visually sort of what's Happening
- 00:45:37under the
- 00:45:38hood jumping outside of our immediate
- 00:45:41Dev environments now um there will be
- 00:45:43times when you want to assess the
- 00:45:44accessibility of a full page or a site
- 00:45:47or everything together and there's heaps
- 00:45:49of tools for this um but two popular
- 00:45:51options are wave and Google
- 00:45:54Lighthouse wave is a free browser
- 00:45:56exension developed by the folks at webam
- 00:45:59uh it can generate reports and it can
- 00:46:01also add visual markers over your site
- 00:46:03to indicate where it's found relevant
- 00:46:05information and you can just click on
- 00:46:07the overlaid um controls for more
- 00:46:11info Google liouse is a suite of
- 00:46:14auditing tools built into Chrome Dev
- 00:46:15tools uh the lighthouse accessibility
- 00:46:18audit gives a score out of 100 which is
- 00:46:21a weighted average based on a user
- 00:46:23impact uh
- 00:46:25assessments and on the the topic of
- 00:46:27Lighthouse I just wanted to um share
- 00:46:29with you a blog post it's a few years
- 00:46:31old now where a developer named Manuel
- 00:46:35matovich I'm sorry I probably butchered
- 00:46:37that uh aimed to build the most
- 00:46:39inaccessible site possible uh while
- 00:46:42achieving a perfect Lighthouse score and
- 00:46:45I'll link this uh blog in my resources
- 00:46:47as well but the gist is that he was able
- 00:46:50to remove access to the content for
- 00:46:52Mouse users keyboard users cited and
- 00:46:55non-sighted basically everyone while
- 00:46:57still getting a 100% score with a
- 00:47:00visually blank page you couldn't even
- 00:47:02read the HTML by inspecting
- 00:47:04element now the point of his post was
- 00:47:07not that automated tools suck it was
- 00:47:10just that automated tests are just
- 00:47:12automated testing are just the first
- 00:47:14step it shortens the feedback loop by
- 00:47:17allowing us to spot issues during
- 00:47:18development but it can only catch 20 to
- 00:47:2130% of accessibility
- 00:47:23violations that's where manual testing
- 00:47:25comes in there are
- 00:47:27there are two main tools we use for
- 00:47:28manual testing the first is one we all
- 00:47:31already have it doesn't require any
- 00:47:33special
- 00:47:34skills and that's your keyboard all you
- 00:47:37need to do is use a website without
- 00:47:39using the mouse so what are we looking
- 00:47:41for we want to see where our keyboard
- 00:47:43focus is at all times we want to make
- 00:47:46sure that the tab order makes sense
- 00:47:48you're not jumping all over this place
- 00:47:51uh we want to check that all the
- 00:47:52interactive components can be accessed
- 00:47:54um for example date Pickers are fairly
- 00:47:57notorious for um having trouble with
- 00:47:59keyboards um and we definitely make sure
- 00:48:01that everything uh that we can do with a
- 00:48:03mouse we can do with a
- 00:48:05keyboard so after we tested with the
- 00:48:07keyboard it is great to run through with
- 00:48:09a screen reader particularly When
- 00:48:11developing interactive components that
- 00:48:13have different states that need to be
- 00:48:14announced like whether something's
- 00:48:16expanded or collapsed uh and there's
- 00:48:18three sort of main uh main players in
- 00:48:21the screen reader World Jaws is the most
- 00:48:24popular for a person's primary screen
- 00:48:26reader this is available to purchase
- 00:48:28outright or as a subscription for
- 00:48:30Windows it's pretty expensive as an
- 00:48:33option so you're probably not likely to
- 00:48:35test with this yourself unless your work
- 00:48:36is paying for it uh nv8 is a free open-
- 00:48:40source screen reader um it was developed
- 00:48:42by two blind Australians um and it also
- 00:48:45runs on Windows
- 00:48:47machines if you don't want to download
- 00:48:49and install anything um both Apple and
- 00:48:52Windows both have built-in options
- 00:48:53available voice over is built into Mac
- 00:48:57devices and narat is built into the
- 00:48:59Windows operating system neither of
- 00:49:02these are heavily used as a primary
- 00:49:04screen reader but uh so 6.5% for voice
- 00:49:08over and I didn't put it on the slide
- 00:49:10because it's so small Point 5% for
- 00:49:14narrator um but the those numbers do go
- 00:49:16up when you look at the occasional usage
- 00:49:18versus the primary screen read usage um
- 00:49:21so I would say those two options are
- 00:49:23still better than not testing at
- 00:49:25all it can be a little daunting at first
- 00:49:28um while you're getting hang of the
- 00:49:29controls because I don't think they're
- 00:49:31particularly um intuitive um so I do
- 00:49:34recommend just like having a beginner's
- 00:49:36guide up while you're using it and I'll
- 00:49:39link to some of those as well in the
- 00:49:41resources and given over half of the web
- 00:49:44traffic um now comes from mobile phones
- 00:49:46you might want to like to test on a
- 00:49:48mobile device as well voiceover is what
- 00:49:51you'll use on iOS uh and on Androids
- 00:49:54you'll use uh TalkBack so both of these
- 00:49:56are buil into the operating system so
- 00:49:58you don't need to download or install
- 00:49:59anything and I'll add some resources for
- 00:50:01those as well unlike desktop apple is
- 00:50:04the clear winner of uh market share on
- 00:50:07mobile with only 29% of users using
- 00:50:09Android over iOS and all these stats are
- 00:50:13taken from the web aim screen reader
- 00:50:15survey um released in 2021 which I'll
- 00:50:17also add um but the latest survey is
- 00:50:20actually coming out in a few weeks and
- 00:50:21it's got heaps of different stats which
- 00:50:23are really interesting
- 00:50:26uh so when we were testing with a screen
- 00:50:28reader we want to be testing like um
- 00:50:30things like are all the buttons being
- 00:50:32announced correctly or are they just
- 00:50:33saying button um does the link text make
- 00:50:37sense out of context or you hearing a
- 00:50:39lot of a read more learn more and you
- 00:50:41don't know wouldn't know what they were
- 00:50:43about form labels being announced um and
- 00:50:46again those interactive component is
- 00:50:48something collapsed or expanded and
- 00:50:49things like
- 00:50:51that so that kind of wraps us up um so
- 00:50:54just to reiterate and summarize on these
- 00:50:56things that developers can do to make
- 00:50:58our apps more accessible uh so making
- 00:51:01the most of HTML and its built-in
- 00:51:03functionality linking our form labels
- 00:51:06with inputs updating page titles when we
- 00:51:08were doing routing managing the user's
- 00:51:11keyboard Focus uh and using the
- 00:51:13available tools for our
- 00:51:16testing and before we all head off to
- 00:51:18lunch I just want to leave you with a
- 00:51:20final
- 00:51:22thought the web does not just connect
- 00:51:24machines it connects people that's who
- 00:51:27we're creating things for right people
- 00:51:29humans are a really diverse Bunch with
- 00:51:31diverse needs and not everyone accesses
- 00:51:34the web in the same way and when we use
- 00:51:37the techniques we've covered today
- 00:51:39you're not just writing code you're
- 00:51:40making the web a better
- 00:51:42place thank you for having
- 00:51:45[Applause]
- 00:51:49me I don't want to keep anyone from
- 00:51:51lunch uh so if anyone has any questions
- 00:51:54feel free to reach out to me on all of
- 00:51:56these socials or just one of them is
- 00:51:58fine um or just um come talk to me after
- 00:52:02I'll be around until 3:30 before I have
- 00:52:05to catch a plane so happy to have a chat
- 00:52:06with anyone who wants to talk more about
- 00:52:08this or have a question
- 00:52:11[Music]
- accessibility
- single page applications
- JavaScript frameworks
- WCAG
- HTML
- focus management
- form accessibility
- testing tools
- semantic markup
- web design