(Originally posted on my website: [alfiedarko.co.uk](www.alfiedarko.co.uk)) As a front-end developer and a maker of products, I’ve switched my focus from learning for learning’s sake to picking up things which improve the end-user experience. Especially since making things other people experience is a big part of web development. It’s only right we make web accessibility a *priority*. ## What is Accessibility? The aim of accessibility on the web is to make your web app usable by everyone. Or as much of our audience as possible. That means for people with disabilities, people who are not on the same type of internet speed as you, and people with slower computers than you etc. It’s easy to forget not all your users have the brand new specced out i9 Macbook Pro with fibre-optic broadband, nice nimble fingers and 20/20 eyesight. ![accessibility logo](https://dev-to-uploads.s3.amazonaws.com/i/xfrf0a9xoclrlm697ukj.png)

**a11y aka accessibility**

## Why is it Important? Because making our digital products usable by our audiences should be on our priority list. Our generation will most probably live longer than any generation previous and will be using the internet well into our old age. This means that we are more likely to experience health issues like vision and motor function deterioration. These are also things any one of us could experience temporarily today by breaking your arm, or temporary vision loss through medicine or an accident etc. Instead of looking at A11y as something for the ‘other’ people, we should look at it as something we could potentially need one day. **Accessibility is good for all of us.** There are millions of under-served users ready to be catered to. W Let’s look at some stat’s that show a11y is not a fringe issue. > 10% of all adult Americans have some degree of vision loss.- AFB > > 60% of those who have hearing loss are either in the workforce or in an educational setting. — HLAA > > **Almost 30%** disabled people with dexterity problems — Family Resources Survey ‘15 There is a long list of accessibility considerations but as this is just an intro to get people thinking about the issue, I’ll just talk a little about dexterity and visual-based ones & some small wins you can do in your day to day work to help others. ---------- # Alternate Input Devices When it comes to alternate input devices and WCAG 2.1 compliance, developers should: - Be sure all elements of the website are accessible via a keyboard - Be sure there are no time limits incorporated into the website. I’ll talk about keyboard and screen reader users but do note there are many other input devices. ## Screen-readers What is a screen reader? It is software that helps users with visual impairments use a computer. Usually, a desktop or browser application that reads out what the mouse or keyboard is currently focused on so the user can navigate accordingly. Almost all OS’s have one inbuilt but they can be downloaded from the net. On Mac’s, the default one is called voice-over & on Windows, it’s called Narrator. Although usually for people with visual impairments, it can also be used by people with dexterity issues and reading issues. It’s quite versatile. Have a play around with them in your spare time to see how some users navigate the web. Being able to empathise with these type of users will help you create better experiences for all. ## Keyboard-only users Often conflated with screen-reader users. Although they may navigate in much the same way, keyboard-only users may have full vision & have the dexterity or other physical barriers that stop them using a traditional mouse. They could also be users who have simply broken their mouse but still need a way to navigate the web. As developers, there are quite a few things we can do to help both types of users. Here is a non-exhaustive list of quick wins! ## ALT Tags! An easy win. Add ALT tags to images & videos that contain a description of what that content is. This allows screen-readers to interpret images for the end-user. Great for memes and images that add context to text. If the image adds no value to the user, it is ok to omit this or have an empty alt tag instead ie. `alt=""` ## Semantic HTML One of the best things you can do is learn and use proper html5. I feel like a lot of the accessibility tips in regards to coding is to alleviate wrongful HTML markup. Using Semantic HTML5 elements instead of using `

` for everything can aid in creating accessible web experiences. These are elements with screen-reader accessibility support baked into them i.e. `

` etc. It also helps code-readability as a side-win. ## Using Correct HTML We can also try and use the correct elements for things like buttons etc. Good: Not as good:

Click Here

Although we can add the correct a11y behaviour by doing something like

Click Here

This is way more verbose & its almost reinventing the wheel (although there may be some fringe reasons to not use the standard ` Although not ideal, in times where we are dealing with components made out of all div’s elements for one reason or another, it’s handy to know that we have these tools at hand ![A word map of different types of aria roles](https://miro.medium.com/max/2000/1*5t0vnj1tXgQRY6QGJCpNQg.jpeg)
Several different types of ARIA roles
## ARIA Labelled By (aria-labelledby=” “)
Shopping List

Toilet Roll

Hand Sanitizer

Pasta

This property simply indicates the id of an element that contains a string that labels our element. ## ARIA Live Regions (aria-live=” “)

Some dynamic content that changes frequently

This attribute tells the screen reader that there is dynamic content within the elements on the page that may get updated frequently. It doesn’t have to be the immediate element either! This is quite useful if you have a section that gets updated visually & its important info that the user needs to know! There are 2 values this can take either **_polite_** or **_assertive_**. What do they mean? **_Polite_** will wait after a few seconds of idle activity to update the screen-reader user of the content updates, and **_assertive_** will interrupt and read the updated section straight away. If there is an area with constant information updates, it should probably be marked as a live region. Think of a live messenger app for an example. As the participants send messages, the new messages on the screen should probably be accessible to the screen-reader to be read out to the user. There are many more ARIA attributes you can check out [here](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA). I’ve just mentioned a few that I use often that you can implement straight away in your day to day work! ---------- # Tools for a11y I’ve included some links to some tools you can check out that will help you create more accessible web experiences. - [https://wave.webaim.org/](https://wave.webaim.org/) (Wave Web Accessibility URL Scanner) - [https://www.deque.com/axe/](https://www.deque.com/axe/) (web accessibility browser plugin for dev teams) - [https://wearecolorblind.com/resources/colorblindly-colorblindness-simulator/](https://wearecolorblind.com/resources/colorblindly-colorblindness-simulator/) (Colorblindly to simulate colour blind vision) - [https://wave.webaim.org/extension/](https://wave.webaim.org/extension/) (WAVE browser extensions) - [https://github.com/pa11y/pa11y-ci](https://github.com/pa11y/pa11y-ci) (A11Y centric build runner for your CI) - [https://tenon.io](https://tenon.io/) (Accessibility as a service) ![](https://miro.medium.com/max/4388/1*TCrpm21txhGdhegf17kgtQ.png) In Chrome Dev Tools, you can check the contrast ratio of different elements to maximize colour accessibility The topic is **_way_** deeper than this article could ever cover without it becoming a book. Hopefully, you have been enlightened into the basics of accessibility with scope to delve deeper into the parts you feel you want to know more about. ---------- ## Further Reading ## [Alfie Darko's Blogs about Web Development](https://www.alfiedarko.co.uk) ## yarn add [MDN: Accessibility](https://developer.mozilla.org/en-US/docs/Web/Accessibility) ## [Web Accessibility in the UK — True Facts [infographic]](https://www.abrightclearweb.com/web-accessibility-in-the-uk/) ## [Accessibility Statistics](https://www.interactiveaccessibility.com/accessibility-statistics) ## [What the Stats Say About Accessibility](https://www.3playmedia.com/accessibility-online-video-stats/)

alfiedarko

Beginners guide to Web Accessibility (a11y)

Join Our Newsletter. No Spam, Only the good stuff.