- Hi, so let's start by defining accessibility.
Accessibility is ensuring that people with disabilities
are able to perceive, understand, navigate within
and contribute using technology.
It's often shortened to a11y
because there's 11 characters
between the a and the y in the word accessibility.
Today we're going to make an accessible form.
So, there's three things that we want to remember.
One, that every field has a visible and associated label.
Two, errors are clearly conveyed visually
and to assistive technology.
And three, complex elements behave the way users expect.
Let's jump into the Code.
I have created a simple component called
simple-form-component that extends
lightning element from LWC.
On the right, I have a local development server setup.
So as I save my code,
I can see a realtime example of how it works.
In my HTML, all I have are two lightning cards.
One with the title Plain HTML,
and the other with the title LWC Base Components.
The first component is an input,
and it's actually fairly complicated.
There's the preview.
I have a name input, that's in an error state.
So in the HTMl, I have a label,
and it has the four attributes set to the ID of the input.
This is important so that,
assistive technologies understand that
that's what the label is for this input.
Similarly, for the error message,
I have aria described by
set to the id of the error message.
And so now, assistive technology understands
that this is the label
and this is the error that's associated
with this specific input.
Now, that's a lot to manage yourself,
so you can add literally one line of code.
Bam. Well, it's two in mine, but
that's because of formatting
and have an awesome lightning input.
All you have, is pass a label attribute
and the required attribute.
And LWC takes care of the rest for you.
So that's one less component
that you have to maintain in your own code base.
Now if I, and I already worked with the error message
so if I tab away without entering any text it has an error,
and if I add my name, the error goes away.
So let's look at a more complicated example
like a combo box
or sometimes in Salesforce they're called pick lists.
So I just copied in a quite a bit of code
I think it's like 100 lines.
And we're just building on
what we established with the text input.
So, in the preview,
You can see there's still an input,
there's still labels, so that all
looks the same as the text input
but now we have this list of options.
For the list, we want to make sure that
users understand what list they're looking through,
and, which option in the list they're currently on
and we do this with aria attributes
in the HTML on the input itself.
On top of that, we have to write custom JavaScript
so users can press their up and down arrow keys
to move between the options.
This does not come for free in HTML.
Since we're adding all this extra stuff
on top of this component,
aria attributes that need to have values change,
custom keyboard navigation.
It's a good idea to also write unit tests
to make sure the component doesn't regress later.
Instead, if I use lightning combo box, it's much easier.
Although it's not one line of code,
it's pretty good.
I added my lightning combo box,
I pass a label.
And I add some CSS,
and I have the options attribute
set to a variable comboOptions.
In my JavaScript file,
I define a variable called comboOptions,
that is an array with objects in it.
Each object has a label and a value.
I save my HTML file in my JavaScript.
And now I have an awesome component.
I can open it with the down arrow
and move between the options
with the up and down arrow keys.
I can also press enter to select an option.
The combo box also works with my mouse.
Now I don't have to maintain
the code that it takes to build a combo box.
It's on Salesforce's side.
The easiest way to make something accessible
within Salesforce is to use our existing
Lightning Web Components.
If those aren't available,
you can build a component based on our
Lightning Design System,
and add the necessary JavaScript to make it fully work.
Here are a few resources that will help you along the way.
The full LWC component library
can be found at sfdc.co/lwc-docs.
We also have an accessibility specific trail
on Trailhead at sfdc.co/a11y-trail
And finally, if you're looking for some
integrated accessibility testing,
check out the axe Testing Toolkit at deque.com/axe.