It’s awesome to build sites that are inclusive and accessible to everyone. There are at least six key areas of disability we can optimize for: visual, hearing, mobility, cognition, speech and neural. Many tools and resources can help here, even if you’re totally new to web accessibility.
Over 1 billion people live with some form of disability. You might have been in a loud room at some point trying to hear the conversation around you or in a low-lighting condition trying to find something in the dark. Do you remember the frustration you felt with that circumstance? Now, imagine if that temporary condition was permanent. How different would your experience on the web be?
To be accessible, sites need to work across multiple devices with varying screen-sizes and different kinds of input, such as screen readers. Moreover, sites should be usable by the broadest group of users, including those with disabilities. Here are a sample of just a few disabilities your users may have:
Vision | Hearing | Mobility |
---|---|---|
– Low vision – Blind – Color blind – Cataracts – Sun glare |
– Hard of hearing – Deaf – Noise – Ear infection |
– Broken arm – Spinal cord injury – Limited dexterity – Hands full |
Cognitive | Speech | Neural |
– Learning disabilities – Sleepy or distracted – Migraine – Autism – Seizure |
– Ambient noise – Sore throat – Speech impediment – Unable to speak |
– Depression – PTSD – Bipolar – Anxiety |
Visual issues range from an inability to distinguish colors to no vision at all.
-
Ensure a minimum contrast ratio threshold is met for text content.
-
Avoid communicating information using solely color and ensure that all text is resizable.
-
Ensure all user interface components can be used with assistive technologies such as screen readers, magnifiers and braille displays. This entails ensuring that UI components are marked up such that accessibility APIs can programmatically determine the role, state, value and title of any element.
Tip: Inspect element in Chrome, Edge and Firefox DevTools displays a tooltip of CSS properties that includes a quick check for color contrast ratio.
I personally live with low-vision and am embarrassed to say, I’m that person that always zooms in on sites, their DevTools and terminal. While supporting zoom is almost never at the top of anyone’s list, optimizing for low-vision users is always appreciated… ?
Hearing issues mean a user may have issues hearing sound emitted from a page.
-
Make the content understandable using text alternatives for all content that is not strictly text.
-
Ensure you test that your UI components are still functional without sound.
Mobility issues can include the inability to operate a mouse, a keyboard or touch-screen.
-
Make the content of your UI components functionally accessible from a keyboard for any actions one would otherwise use a mouse for.
-
Ensure pages are correctly marked up for assistive technologies; these users may use technologies such as voice control software and physical switch controls, which tend to use the same APIs as other assistive technologies like screen readers.
Cognitive issues mean a user may require assistive technologies to help them with reading text, so it’s important to ensure text alternatives exist.
- Be mindful when using animations. Avoid a visual presentation that is repetitive or flashing as this can cause some users issues.
The prefers-reduced-motion
CSS media query allows you to limit animations and autoplaying videos for users who prefer reduced motion.
/*
If the user expressed a preference for reduced motion, don't use animations on buttons.
*/
@media (prefers-reduced-motion: reduce) {
button {
animation: none;
}
}
- Avoid interactions that are timing-based.
This may seem like a lot of bases to cover, but we’ll walk through the process for assessing and then improving the accessibility of your UI components.
Tip: Some great accessibility do’s and don’ts digital posters are available by the Gov.uk accessibility team for spreading awareness of best practices in your team:
Are your UI components accessible?
Summary (tl;dr)
When auditing your page’s UI components for accessibility, ask yourself:
-
Can you use your UI component with the keyboard only? Does it manage to focus and avoid focus traps? Can it respond to the appropriate keyboard events?
-
Can you use your UI component with a screen reader? Have you provided text alternatives for any information which is presented visually? Have you added semantic information using ARIA?
-
Can your UI component work without sound? Turn off your speakers and go through your use cases.
-
Can it work without color? Ensure your UI component can be used by someone who cannot see colors. A helpful tool for simulating color blindness is a Chrome extension called SEE, (try all four forms of color blindness simulation available). You may also be interested in the Daltonize extension which is similarly useful.
-
Can your UI component work with high-contrast mode enabled? All modern operating systems support a high contrast mode. High Contrast is a Chrome extension available that can help here.
Native controls (such as and
) have accessibility built-in by the browser. They are focusable using the tab key, respond to keyboard events (like Enter, space and arrow keys), and have semantic roles, states and properties used by accessibility tools. The default styling should also meet the accessibility requirements listed above.
Custom UI components (with the exception of components that extend native elements like ) do not have any built-in functionality, including accessibility, so this needs to be provided by you. A good place to start when implementing accessibility is to compare your components to an analogous native element (or a combination of several native elements, depending on how complex your component is).
Tip: Most browser DevTools support inspecting the accessibility tree of a page. In Chrome, this is available via the Accessibility tab in the Elements panel.
Firefox also has an Accessibility panel and Safari exposes this information in the Element’s panel Node tab.
The following is a list of questions you can ask yourself when attempting to make your UI components more accessible.
Can your UI component be used with the keyboard alone?
Ideally, ensure that all functionality in your UI component can be reached by a keyboard. During your UX design, think about how you would use your element with the keyboard alone, and figure out a consistent set of keyboard interactions.
Firstly, ensure that you have a sensible focus target for each component. For example, a complex component like a menu may be one focus target within a page, but should then manage focus within itself so that the active menu item always takes focus.
Managing focus within a complex element
Using tabindex
The tabindex
attribute allows elements / UI components to be focused using the keyboard. Keyboard-only and assistive technology users both need to be able to place keyboard focus on elements in order to interact with them. Native interactive elements are implicitly focusable, so they don’t need a tabindex attribute unless we wish to change their position in the tab order.
There are three types of tabindex values:
-
tabindex=”0″ is the most common, and will place the element in the “natural” tab order (defined by the DOM order).
-
a tabindex value greater than 0 will place the element in a manual tab order — all elements in the page with a positive tabindex value will be visited in numerical order before elements in the natural tab order.
-
a tabindex value equal to -1 will cause the element to be programmatically focusable, but not in the tab order.
For custom UI components, always use tabindex
values of 0 or -1, as you won’t be able to determine the order of elements on a given page ahead of time — and even if we did, they may be subject to change. A tabindex
value of -1 is particularly useful for managing focus within complex components as described above.
Also ensure that focus is always visible, whether by allowing the default focus ring style, or applying a discernible focus style. Remember not to trap the keyboard user — focus should be able to be moved away from an element using only the keyboard.
You may also be interested in the roving tabindex
or aria-activedescendant
approaches, covered over on MDN.
Using autofocus
The HTML autofocus
attribute allows an author to specify that a particular element should automatically take focus when the page is loaded. It is already supported on all web form controls, including . To autofocus
elements in your own custom UI components, call the focus() method supported on all HTML elements that can be focused (e.g document.querySelector('myButton').focus()
).
Adding keyboard interaction
Once your UI component is focusable, try to provide a good keyboard interaction story when a component is focused, by handling appropriate keyboard events — for example, allow the user to use arrow keys to select menu options, and space or enter to activate buttons. The ARIA design patterns guide provides some guidance here.
Finally, ensure that your keyboard shortcuts are discoverable. For example, a common practice is to have a keyboard shortcut legend (on-screen text) to inform the user that shortcuts exist. For example, “Press ? for keyboard shortcuts”. Alternatively a hint such a tooltip could be used to inform the user about the shortcut existing.
The importance of managing focus cannot be understated. One example is a navigation drawer. If adding a UI component to the page you need to direct focus to an element inside of it otherwise users may have to tab through the entire page to get there. This can be a frustrating experience, so be sure to test focus for all keyboard navigable components in your page.
Tip: You can use Puppeteer to automate running keyboard accessibility tests for toggling UI states. WalkMe Engineering have a great guide on this I recommend reading.
// Example for expanding and collapsing a category with the spacebar key
const category = await page.$(`.category`);
// verify tabIndex, role and focus
expect(await page.evaluate(elem => elem.getAttribute(`role`), category)).toEqual(`button`);
expect(await page.evaluate(elem => elem.getAttribute(`tabindex`), category)).toEqual(`0`);
expect(await page.evaluate(elem => window.document.activeElement === elem, category)).toEqual(true);
// verify aria-expanded = false
expect(await page.evaluate(elem => elem.getAttribute(`aria-expanded`), category)).toEqual(`false`);
// toggle category by press space
await page.keyboard.press('Space');
// verify aria-expanded = true
expect(await page.evaluate(elem => elem.getAttribute(`aria-expanded`), category)).toEqual(`true`);
Can you use your UI component with a screen reader?
Around 1–2% of users will be using a screen reader. Can you determine all important information and interact with the component using the screen reader and keyboard alone?
The following questions should help guide you in addressing screen reader accessibility:
Do all components and images have meaningful text alternatives?
Wherever information about the name or purpose of an interactive component is conveyed visually, an accessible text alternative needs to be provided.
For example, if your
UI component only displays an icon such as a Settings menu icon to indicate that it is a settings menu, it needs an accessible text alternative such as “settings”, which conveys the same information. Depending on context, this may use an alt attribute, an aria-label attribute, an aria-labelledby attribute, or plain text in the Shadow DOM. You can find general technical tips in WebAIM Quick Reference.
Any UI component which displays an image should provide a mechanism for providing alternative text for that image, analogous to the alt attribute.
Do your components provide semantic information?
Assistive technology conveys semantic information which is otherwise expressed to sighted users via visual cues such as formatting, cursor style, or position. Native elements have this semantic information built-in by the browser, but for custom components you need to use ARIA to add this information in.
As a rule of thumb, any component which listens to a mouse click or hover event should not only have some kind of keyboard event listener, but also an ARIA role and potentially ARIA states and attributes.
For example, a custom
UI component might take an ARIA role of slider, which has some related ARIA attributes: aria-valuenow, aria-valuemin and aria-valuemax. By binding these attributes to the relevant properties on your custom component, you can allow users of assistive technology to interact with the element and change its value, and even cause the visual presentation of the element to change accordingly.
A range slider component
role="slider" aria-valuemin="1" aria-valuemax="5"
aria-valuenow="2.5">
Can users understand everything without relying on color?
Color shouldn’t be used as the only means of conveying information, such as indicating a status, prompting for a response or distinguishing a visual custom component. For example, if you created an
component using color to distinguish between heavy, moderate and light traffic, an alternative means of distinguishing traffic levels should also be made available: one solution might be to hover over an element to display information in a tooltip.
Is there sufficient contrast between the text/images and the background?
Any text content displayed in your component should meet the minimum (AA) contrast bar. Consider providing a high-contrast theme which meets the higher (AAA) bar, and also ensure that user agent style sheets can be applied if users require extreme contrast or different colors. You can use this Color Contrast Checker as an aid when doing design.
Is the moving or flashing content in your components stoppable and safe?
Content that moves, scrolls or blinks that lasts for anything more than 5 seconds should be able to be paused, stopped or hidden. In general, try to flash no more than three times per second.
Accessibility Tooling
A number of tools are available that can assist with debugging the accessibility of your visual components.
-
Axe provides automated accessibility testing for your framework or browser of choice. Axe Puppeteer can be used for writing automated accessibility tests.
-
The Lighthouse Accessibility audits provide helpful insights for discovering common accessibility issues. The accessibility score is a weighted average of all accessibility audits, based on Axe user impact assessments. For monitoring accessibility via continuous integration, see Lighthouse CI.
-
Tenon.io is useful for testing common accessibility problems. Tenon has strong integration support across build tools, browsers (via extensions) and even text editors.
-
There are many library and framework specific tools for highlighting accessibility issues with components. e.g web.dev covers using eslint-plugin-jsx-a11y to highlight accessibility issues for React components in your editor:
If you use Angular, codelyzer provides in-editor accessibility audits too:
-
You can examine the way that assistive technologies see web content by using Accessibility Inspector (Mac), or Windows Automation API Testing Tools and AccProbe (Windows). Additionally you can see the full accessibility tree that Chrome creates by navigating to chrome://accessibility.
-
The best way to test for screen reader support on a Mac is using the VoiceOver utility. You can use ⌘F5 to enable/disable, Ctrl Option ←→ to move through the page and Ctrl Shift Option ↑↓ to move up/down tree. For more detailed instructions, see the full list of VoiceOver commands and the list of VoiceOver Web commands.
-
tota11y is a useful visualiser for assistive technology issues built by Khan Academy. It’s a script that adds a button to your document that triggers several plugins for annotating things like insufficient contrast ratio and other a11y violations.
-
On Windows, NVDA is a free, open source screen reader which is fully featured and rapidly gaining in popularity. However, note that it has a much steeper learning curve for sighted users than VoiceOver.
-
ChromeLens helps develop for the visually impaired. It’s also got great support for visualising keyboard navigation paths http://chromelens.xyz/
- ChromeVox is a screen reader which is available as a Chrome extension, and built in on ChromeOS devices.
We still have a long way to go improving accessibility on the web. Per the Web Almanac:
- 4 out of every 5 sites have text which easily blends into the background, making it unreadable.
- 49.91% of pages still fail to provide alt attributes for some of their images
- Only 24% of pages that use buttons or links include textual labels with these controls.
- Only 22.33% of pages provide labels for all their form inputs.
To learn more about accessibility fundamentals to help us improve the above, I recommend the Accessible to all docs on web.dev. There’s much we can do to build experiences that are more inclusive of everyone.
63 comments
Thanks for another informative site. The place else may just
I am getting that type of info written in such a perfect way?
I have a venture that I’m simply now running on, and I’ve been at the glance out
for such information.
I know this web page presents quality based articles or reviews and additional data, is there any other site which offers these things in quality?
What’s up mates, fastidious paragraph and fastidious arguments
commented here, I am truly enjoying by these.
I do not even know how I ended up here, but I thought this post was great.
I do not know who you are but certainly you
are going to a famous blogger if you are not already 😉 Cheers!
Hi there, I discovered your website via Google whilst looking
for a related topic, your web site got here up,
it appears great. I’ve bookmarked it in my google bookmarks.
Hi there, just turned into aware of your blog thru Google, and found
that it’s really informative. I am going to watch out for brussels.
I will be grateful if you continue this in future.
Many folks will probably be benefited out of your writing.
Cheers!
Why visitors still use to read news papers when in this technological globe everything is accessible on net?
Everyone loves what you guys are up too. This type of clever work and coverage!
Keep up the fantastic works guys I’ve added you guys to my blogroll.
Hey there would you mind letting me know which hosting company you’re working with?
I’ve loaded your blog in 3 different browsers and I must say this blog loads a lot quicker then most.
Can you recommend a good hosting provider at a reasonable price?
Cheers, I appreciate it!
We stumbled over here from a different website and thought I might as well check things out.
I like what I see so now i am following you.
Look forward to looking at your web page repeatedly.
We’re a bunch of volunteers and starting a new scheme
in our community. Your website offered us with valuable information to work on. You have done an impressive process
and our entire community will probably be thankful to you.
asmr https://app.gumroad.com/asmr2021/p/best-asmr-online asmr
Highly descriptive article, I loved that bit. Will
there be a part 2? quest bars http://bitly.com/3jZgEA2 quest bars
cialis cheapest price
Hi everyone, it’s my first pay a visit at this web site, and
post is genuinely fruitful for me, keep up posting these
types of posts. cheap flights http://1704milesapart.tumblr.com/ cheap flights
Good day! Do you use Twitter? I’d like to follow you if that
would be okay. I’m absolutely enjoying your blog and look forward to
new posts. scoliosis surgery https://0401mm.tumblr.com/ scoliosis surgery
There is definately a great deal to find out about this issue.
I love all the points you’ve made. scoliosis surgery https://coub.com/stories/962966-scoliosis-surgery scoliosis surgery
Hello colleagues, its fantastic article concerning cultureand
completely defined, keep it up all the time. quest bars https://www.iherb.com/search?kw=quest%20bars quest bars
It’s amazing to visit this site and reading the views of all
mates on the topic of this paragraph, while I am also zealous of
getting familiarity. ps4 games https://j.mp/3nkdKIi ps4
http://homemadewithmess.co.uk/recipe/crunchy-beetroot-and-bean-burgers/comment-page-55/
http://infoshrimp.com/2018/05/30/biomar-expande-y-fortalece-su-posicion-en-ecuador/
Does your website have a contact page? I’m having trouble locating it but, I’d like to
shoot you an email. I’ve got some creative ideas for your blog you might be interested
in hearing. Either way, great website and I look forward to seeing it expand over time.
https://parttimejobshiredin30minutes.wildapricot.org/ part time jobs hired in 30 minutes
Good day! I know this is kinda off topic but I’d figured I’d ask. Would you be interested in trading links or maybe guest authoring a blog post or vice-versa? My website goes over a lot of the same subjects as yours and I think we could greatly benefit from each other. If you are interested feel free to shoot me an e-mail. I look forward to hearing from you! Awesome blog by the way!|
I get pleasure from, lead to I found just what I used to be taking a look for.
You’ve ended my 4 day lengthy hunt! God Bless you man. Have a great day.
Bye
I could not refrain from commenting. Exceptionally well written!|
Ahaa, its fastidious conversation concerning this paragraph at this place at this web site, I have read all that, so at this time me also commenting here.|
I think that what you posted was very logical.
But, what about this? suppose you were to write a killer headline?
I mean, I don’t want to tell you how to run your blog, however suppose you added
a post title that makes people want more? I mean Accessibility Tips for Web
Developers – Pavvy Designs is kinda boring.
You ought to look at Yahoo’s front page and see how they create news
titles to get people to open the links. You might try adding
a video or a related picture or two to get people interested about everything’ve got to say.
In my opinion, it could bring your website a little livelier.
Everyone loves it when folks come together and share ideas. Great blog, keep it up!|
It is the best time to make some plans for the future and it is time to be happy. I’ve learn this put up and if I may just I desire to counsel you some attention-grabbing issues or tips. Perhaps you can write next articles relating to this article. I desire to learn more issues about it!|
Hmm is anyone else experiencing problems with the pictures on this blog loading? I’m trying to find out if its a problem on my end or if it’s the blog. Any feedback would be greatly appreciated.|
Wow! Finally I got a blog from where I be able to actually get useful facts concerning my study and knowledge.|
My spouse and I stumbled over here by a different web page and thought I should check things out. I like what I see so now i’m following you. Look forward to looking over your web page repeatedly.|
Clomid Admis
You’ve made some good points there. I looked on the internet for
additional information about the issue and found most individuals will go along with your views on this
web site.
I’ve been browsing on-line more than three hours lately, but I never found any attention-grabbing article like yours. It is pretty price enough for me. In my view, if all webmasters and bloggers made just right content as you probably did, the net can be a lot more useful than ever before.|
Heya i’m for the first time here. I came across this board and I in finding It truly helpful & it helped me out a lot. I hope to give one thing again and aid others such as you helped me.|
Hi there, just wanted to mention, I liked this article. It was funny. Keep on posting!|
This paragraph will assist the internet visitors for creating new web site or even a blog from start to end.|
I’m truly enjoying the design and layout of your website. It’s a very easy on the eyes which makes it much more pleasant for me to come here and visit more often. Did you hire out a developer to create your theme? Great work!|
Hurrah! In the end I got a web site from where I be able to really get helpful information concerning my study and knowledge.|
Hmm it looks like your website ate my first comment (it was super long) so I guess I’ll just sum it up what I had written and say, I’m thoroughly enjoying your blog. I too am an aspiring blog blogger but I’m still new to the whole thing. Do you have any recommendations for first-time blog writers? I’d genuinely appreciate it.|
Undeniably consider that which you stated. Your favourite justification seemed to be at
the internet the easiest thing to remember of. I say
to you, I definitely get annoyed whilst folks think
about worries that they just don’t recognize about.
You managed to hit the nail upon the highest as neatly as outlined out the entire
thing without having side-effects , folks could take a
signal. Will likely be again to get more. Thank
you
I was suggested this website by my cousin. I am not sure whether this post is written by him as nobody else know such detailed about my difficulty. You are incredible! Thanks!|
We absolutely love your blog and find many of your post’s to be precisely what I’m looking for. can you offer guest writers to write content in your case? I wouldn’t mind publishing a post or elaborating on some of the subjects you write regarding here. Again, awesome weblog!|
I’m impressed, I must say. Rarely do I come across a blog that’s equally educative and engaging, and let me tell you, you’ve hit the nail on the head. The issue is something not enough people are speaking intelligently about. I’m very happy that I came across this during my hunt for something regarding this.|
Hi, I do think this is a great website. I stumbledupon it 😉 I’m going to come back yet again since I book-marked it. Money and freedom is the greatest way to change, may you be rich and continue to help others.|
Pretty nice post. I just stumbled upon your weblog and wished to say that I have really enjoyed browsing your blog posts. In any case I’ll be subscribing to your feed and I hope you write again very soon!|
Hi there, There’s no doubt that your website might be having browser compatibility problems. Whenever I take a look at your web site in Safari, it looks fine however, if opening in I.E., it has some overlapping issues. I just wanted to provide you with a quick heads up! Aside from that, excellent blog!|
It is perfect time to make some plans for the future and it
is time to be happy. I’ve read this post and if I could I desire to suggest you some interesting
things or tips. Maybe you can write next articles referring to this article.
I desire to read more things about it!
Hello! I could have sworn I’ve been to this website before but after reading through some of the post I realized it’s new to
me. Nonetheless, I’m definitely glad I found it and I’ll be bookmarking
and checking back often!
I know this web page offers quality based posts and additional stuff, is there any other website which gives these information in quality?
Howdy are using WordPress for your blog platform? I’m new to the blog world but
I’m trying to get started and set up my own. Do you require any html coding expertise to make your own blog?
Any help would be really appreciated!
I will right away grab your rss feed as I can’t to find your email subscription hyperlink or e-newsletter service.
Do you have any? Please allow me know in order that I could subscribe.
Thanks.
Incredible story there. What occurred after? Thanks!
Interesting blog! Is your theme custom made or did you download it from somewhere?
A design like yours with a few simple tweeks would really
make my blog stand out. Please let me know where you got your design. Thanks a lot
Hi to every body, it’s my first pay a visit of this website; this blog contains remarkable and genuinely excellent information in favor of
readers.
Saved as a favorite, I love your site!
I am really inspired together with your writing abilities and also
with the layout for your weblog. Is this a paid theme or did
you customize it your self? Either way stay up the excellent
quality writing, it is rare to peer a great blog like
this one today..