DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Ankita Kulkarni
Ankita Kulkarni

Posted on • Originally published at Medium on

Accessibility 360β€Šβ€”β€ŠWeb and mobile

Accessibility 360β€Šβ€”β€ŠWeb πŸ•Έ and mobileπŸ“±

We need to make this world 🌎 a better place for everyone.

https://medium.com/media/a5f95d8a6bcb6f5dd9cb78b699d9c3e8/href

As a developer, I’ve noticed ever since starting out that a lot of us are intimidated by building accessible apps. The fact of the matter is, it doesn’t have to (and shouldn’t) be that way. Accessibility is just like building πŸ— any other featureβ€Šβ€”β€Šand there needs to be greater awareness around this. 🀯

If you’ve incorporated accessibility into apps before or want to integrate accessibility for the first time, then this post is for you β¬…. I’m going to use both web πŸ•Έ and mobileπŸ“±as an example.

Here are a few things ✨ to consider when incorporating accessibility. Let’s get started!

πŸ‘πŸΌ Semantics πŸ‘πŸΌ

Semantics for Web and Mobile

Follow the semantics 🧠. When any assistive device scans a web page, it will read the HTML structure of the page. That means when using an image on the page, don’t use a div and give it a background-image but instead use a tag for it because semantically img is the correct HTML element to use. Another example is a

and tag which is mainly used for layout only as they are semantically meaningless, they don’t have a keyboard ⌨️ or touch support in any browser πŸ•Έ.

Similarly, for πŸ“±mobile, use the Image API from React Native which is the correct semantic element. If you don’t, you will have to patch it up with different accessibility tags πŸ”–. This way, you’ll get accessibility right out of the gate instead of having to fix πŸ”¨ things later.

Accessibility is great for SEO πŸ’Ή

In HTML, we have six levels of header tags from H1 to H6. If a user primarily uses a keyboard ⌨️ to navigate using tabs, the headings act as markers that the screen reader uses to navigate. By using the correct header a screen reader can help the user to find the section they want to read. This also helps screen readers πŸ“– to skip the block of contents and only focus on headings. When a user looks πŸ” for a term using a search engine, and you’ve used the correct semantics, it will rank higher on the page which can lead to an increase in traffic🚦.

That means when you’re thinking of accessibility, you’re also thinking of SEO. πŸ’―

Bonus: you will make the marketing team happy when you get that SEO right.πŸ˜‰

Build accessible components β›©

With the power πŸ’ͺ🏼 of components, we get a lot of re-usability. When we onboard new developers, it is easier for them to find a component that already exists and use that instead of creating a new one. πŸ€·πŸ»β€β™€οΈ This is where a design system πŸ’… comes in handy because we can make these components accessible.

It’s important to add accessibility properties to these common components such as accessibilityLabel for React Native or ariaLabel for the web (take a look at the wrapper example below) and use linters to suggest that developers add these to your components while using them. Therefore adding a wrapper to these components with accessibility properties baked in is really useful πŸ’―. That way anyone using the component will get the default accessibility properties baked in automatically.

interface IButtonProps {
  onPress: () => void;
  accessibilityLabel: string;
  accessibilityHint?: string;
  accessibilityRole: string;
  text: string;
  buttonStyle?: any;
  isDisabled: boolean;
  buttonTheme?: any; 
}

Build a πŸ‘πŸΌ design πŸ‘πŸΌ system πŸ‘πŸΌ of πŸ‘πŸΌ accessible πŸ‘πŸΌcomponents πŸ‘πŸΌ

There’s a lot to be said on how design systems πŸ’… can improve accessibility, it’s not easy to sum up the many, many benefits in a few sentences. For example, as you build accessible components, your accessibility becomes baked in wherever those components are used therefore improving accessibility across your appβ€Šβ€”β€Škeeping in mind that doesn’t mean your entire app is accessible. The list goes on.

An excellent example of a component library is Reakit. They have a separate section on accessibility with some fantastic explanations of the different considerations you should be thinking about. For your team, you can start using β€œReakit” as it will provide you with a lot of common accessible components so you don’t have to build πŸ‘·β€β™€οΈ from scratch. Alternatively, you can also build a Design System πŸ’… yourself and use ReaKit as a reference. For example,

Reakit accessibility button example πŸ’œ

Personally, I like using Storybook ❀️ as it serves as documentation for your components and everyone on the team has visibility πŸ‘€ of all the components, it’s properties etc. You can also use it to keep track πŸ›€ of which components are accessible and which are not and run automated accessibility tests on them.

Rules to follow πŸ“

Different states to consider for apps

Every web πŸ•Έ or mobileπŸ“± app will have elements such as Text, Buttons, Keyboard navigation, responsiveness and more, some of which are depicted above. Try adding a wrapper around components with the required and optional properties related to accessibility just like you would otherwise. You can determine these properties through the docs. This not only helps onboard new developers quickly but also help keep accessibility top of mind. 🧠

The reality 😐 is, we humans are creatures of habit πŸ€·πŸ»β€β™€οΈ and this will help create good habits. πŸ’―

Example of an accessible component πŸ’―

This is just a basic checkbox βœ… component but will give you an idea on how we can start adding accessibility.

https://medium.com/media/a51ee039bfa1972d0fa552e81b3264a0/href

Screen Reader πŸ–₯ for web πŸ•Έ and mobile πŸ“±

On the web 🌎, if you are a Mac 🍎 user, you can turn on voiceover by using cmd+f5. You should turn on the screen reader very early in the development process to see how it will inevitably read the contents of your website. This will help create a better user experience and help ensure you use the right accessibility properties. Here is an example of how the above checkbox component will be read by the screen reader when voice over is turned on.

Checkbox component when then voice over is turned on

Accessibility checklist βœ…

Below is a handy checklist βœ” on what should be considered when thinking of accessibility. This is a great start and serves as a solid reference point. It’s important to also keep in mind that there is more to accessibility than what is listed here. Here is the πŸ”—link to this checklist.

Accessibility checklist

Make Open-source πŸ‘πŸΌ libraries more flexible or accessible

If you are an open-source developer, you can help promote πŸ’ͺ accessibility by adding accessibility yourself, making your library manageable so that others can add accessibility properties themselvesβ€Šβ€”β€Šor both πŸ™ŒπŸΌ. This is very important as developers tend to use a lot of packages πŸ“¦ on our projects. This way, before we decide to code something ourselves, we can look for existing packages that will do the job for us.

If those packages aren’t flexible enough to inject properties, you can fork🍴 their repository and add accessibility properties yourself. However, this is a much more difficult option 😒 and takes a lot more time ⏰. Therefore it is our responsibility as open-source developers to make our packages more flexible.

I hope that after reading how you can get started with accessibility, you realize how important it is to consider it from the startβ€Šβ€”β€Šnot as an afterthought. If you’re interested in learning more, check out one of my recent talks at React Europe, here: https://youtu.be/X_3tnSwXLls

Please give it some πŸ‘ if you liked it πŸ™ and share your experience in the comments below.



Top comments (2)

Collapse
 
ben profile image
Ben Halpern

Thanks for writing this, I think it hits on all the key points. I think touching on SEO helps hammer home the idea that machine-readable development for the purposes of business goals and accessibility go hand in hand.

I'd say this will be a useful resource for anyone who comes upon it.

Collapse
 
kulkarniankita9 profile image
Ankita Kulkarni

I'm glad you liked it, thanks :)

Every Week

We have a Welcome Thread where we invite members to tell us a bit about themselves. Join the conversation with us!