DEV Community: Lopè Ariyo

An Introduction to Web Accessibility

Lopè Ariyo — Sun, 21 Jun 2020 12:58:59 +0000

I'll admit, I'm new to the world of accessibility. It's something that I had heard of and knew was important but I didn't actually know how to implement it.

If you're a member of twitter and most especially the tech twitter community you'll have seen the recent voice feature that's been implemented as well as the backlash it has received. If not, the new feature allows users to record a tweet instead of typing it. This is really cool, right? It allows people to diversify how they communicate their thoughts.

Well, the problem is, it excludes a whole community of users who have hearing difficulties. For platforms that rely on sound, there is usually an option for captions/subtitles so that no matter a user's situation, they can enjoy the provided content. So it is understandably upsetting that a global company like Twitter has left accessibility as an afterthought.

Simply put, accessibility is a necessity. As a developer at the beginning of my journey, these are practices I want to learn now, rather than correct later. I think it's important to have empathy at the forefront of the work you create because at the end of the day it makes a better product for everyone.

What type of developer do you want to be? If you're like me then join me on this journey to learning about web accessibility and learning how to implement it.

So, let's start from the beginning, what exactly is web accessibility?

In a nutshell, web accessibility is providing a web app for a user that, regardless of whether or not said user has an impairment, enables them to access the app's content without any difficulties.

"Surely, if a person can visit a website in the first place it's accessible". Well no, not really. A real-life example of this is where a wheelchair user wants to visit a restaurant because it's had such popular reviews and it advertises a 'No Booking Necessary' service. It turns outs, even though they can get into the restaurant, there isn't any seating area available for them because of the way the restaurant is laid out - all the chairs and tables are extremely close together. It should be obvious why this is a problem. A wheelchair user needs space to navigate around the restaurant before making it to and from their seat or the lavatory. Let's say they do manage to squeeze into a place, they're still not really able to enjoy the food because they're uncomfortable and the experience overall becomes a negative one. The head chef or restaurant owner probably never meant to discriminate against the wheelchair user, after all, they want everyone to experience their food. However, they did and whether or not the food was good it no longer matters because the overall experience and comfort for the wheelchair user were poor.

If you apply this example to an actual website, the 'No Booking Necessary' service is equivalent to saying "Anyone can use this site". The chairs and tables are the structure of the website. The food being served is the website's content and of course, the head chef or restaurant owner is the developer. Each and every part contributes to the user experience. There's an important lesson here. It's also a simple one. Try to think about and accommodate for all possible types of users who may wish to have access to your website. You don't want to leave a user frustrated.

Typically, there are many types of impairments people can have, and three levels of severity. An impairment, in terms of web development, can be classified as:

Sensory (mostly vision and hearing)
Motor / Physical
Cognitive.

The severities in which they are categorized are:

Situational (based on the current environment)
Temporary (most likely stemming from an injury)
Permanent (a continuing condition either from birth or through injury).

An app's accessibility can be implemented through focus, semantics, and visual design. Focus is typically looking at where the user is located on the app and how to help the user know where they are and what they are on. Semantics dives into how to logically layout an app so that it makes sense to a user who may not be navigating through the app in a 'traditional' way. The visual design aspect relates almost entirely to CSS. Can it be viewed on any browser? Is it responsive? Is there suitable contrasting throughout the app? Can text be read properly?

I'll be covering these topics in more depth in later posts once I learn more. For now, one thing to be aware of is some of the assistive technologies out there to help implement these features. Assistive technology includes but is not limited to screen readers, braille displays, magnifiers, voice control, and eye-tracking.

That's it for now! Here is a small list of some of the resources I (currently) have and will be using to understand and implement accessibility.

Udacity Web Accessibility Free Course

The a11y Project

Carnegie Museum's Web Accessibility Guidlines

JFHector(and others)'s Guide

How I’ve Adapted my VSCode Workspace

Lopè Ariyo — Mon, 15 Jun 2020 15:46:28 +0000

Have you ever come across a person who feels like they can’t work when things aren’t in sync with each other visually? Well… that’s me! So, now that I’ve become comfortable with what I expect from my workspace, here’s my small guide on how to make your VS code workspace work for you.

First things first, choose a theme…. There’s so many different ones out there and this blog has done a great job of curating the most popular.

50 VS Code themes for 2020

If you're looking for a new theme to change up your code editor in the new year, I'm here to help! Check out a variety of stylish themes with unique color palettes-from sleek to snazzy to vibrant and everything in between-to see what works best for you.

In addition, https://vscodethemes.com/ list themes for VSCode that are trending which you.

I currently love using Panda Theme because of how colorful it is, though I’ve found it can be a lot for others.

Panda Theme

A Superminimal, dark Syntax Theme. This is the latest version of the Panda Syntax theme. It's a dark syntax theme crafted especially for Visual Studio Code [New Version], with subtle colors that are meant to be easy on the eyes. The font in the screenshot is Operator Mono.

Once I downloaded my theme I used Apple’s Digital Colour Meter to find out what colours I was working so that I could adapt the rest of my visual enhancements to match. Colour Meter gives you the RGB codes however you’ll also need the hex code to change some visual enhancements. https://convertingcolors.com/ is great for this!

Here’s what I was able to get:

Green(it’s really turquoise but whatever) — RGB (25,249,216) | HEX #19F9D8
Pink — RGB (255,118,181)| HEX #FF76B5
Light Purple — RGB(177,128,215) | HEX #B180D7
Blue — RGB (111,193,255)| HEX #6FC1FF”
Orange — RGB (247,179, 106)| HEX #F7B36A
Light Pink — RGB (255,135,181)| HEX #FF87B4

The semantics for the colour scheme are mentioned in it’s documentation:

tinkertrain/panda-syntax-vscode

Some semantic meaning is intended for colors to help easily scan files. They are documented here for reference. Language keywords and component names are italicized for emphasis Green: Strings Pink: Logic Control Light Purple: Language access like module.exports, process.env Blue: Functions Orange: Variable assignments keywords Light Pink: Object access

Now that you have the colours you need, you can access VSCode settings using shift + cmd + P and then clicking on Preferences: Open Settings (JSON) to modify any visual enhancements you have. Here’s how I changed mine.

Indent Rainbow

I hate when my indents aren’t uniform so indent rainbow is a great tool for making sure I adhere to that. I made it so that the indent rainbow loops on five of my six theme colours with a transparency of 0.4 instead of it’s default colors. In addition, I gave it an error color of bright red so that it interupts how my theme looks and makes me want to correct it straight away.

In this blog, they’ve used a single colour, and changed the transparencies of each indent to differentiate between them.

Useful VSCode Extensions - Visual Enhancements - Petr Tichy - Front End Developer - Melbourne

Are you looking for some useful VSCode extensions that could speed up your front-end development workflow? I have been building React and Angular projects in VSCode over the last few years and in the next few posts I will share with you my most popular VSCode extensions.

Bracket Pair Colorizer 2

Bracket Pair Colorizer doesn’t allow you to change it’s colors but the second version does. As brackets only appear next to functions I chose the colours of my theme that contrast against Blue(that’s the colour functions appear in because of the Panda semantics. Alternatively, Rainbow Brackets can be used instead.

Bracket Padder

Bracket padder doesn’t add colour, but instead as white space, which is great if you prefer your code spaced out and easier to read, as opposed to clunky,.

Highlight Matching Tags

Highlight Matching Tags, for me, is essentially the tag version of bracket pair colorizer. The only downside (it seems) is that you can only have one color. Otherwise, it would be great to have that change color depending on their indents.

Auto Close Tag + Auto Rename Tag + HtmlTagWrap

I feel like the above three extensions all work as one. The auto-close and auto rename tags are self-explanatory. Once you create an opening tag, a closing tag is automatically named for you and if you change the opening of an existing tag the auto-rename extension will change the closing tag accordingly. HtmlTagWrap allows you to highlight some html and then wrap it in a default tag (it’s automatically set to

) using opt + w. I find myself having to wrap existing html in

tags often, so I changed it’s default accordingly, however if you wanted to leave the default as

Auto Rename is still there for you!

Better Comments

Better Comments can be modified by adding tags and then changing the colours within those tags. In this case tags are a keyword/letter that come after the comment notation for Better Comments to identify. I won’t go into how many tags I’ve got but I like to use backgroun colors to explain the type of comment and then use symbols to represent bullet points, again I’ve styled it to match my panda theme. TO-DO Highlight is another alternative to better comments.

Code Spell Checker

I admit I specifically went looking for this after I failed a code challenge because I made a spelling error. Without realising it, I had spelt a model differently from how I spelt my controller in Ruby on rails and as a result I couldn’t get my code working. What was worse is I couldn’t actually see it! Code spell checker picks up code spelt in incorrectly and highlights it with a squiggly underline, so it’s great to avoid this type of situation!

Prettier

Believe it or not, but even with all these extensions, I still can’t live without a code formatter. I think the best one is by far Prettier. I think of it as a final path to make sure my code is essentially “prettier”. I make sure it automatically formats my code on save and it’s tab width works in correlation as my rainbow-indent add on.

IntelliSense(s) and Snippet Packs

Not much to these but Intellisense add ons (there are hundreds! ) and Snippet packs (also hundreds!) are also useful tools for that help me avoid making silly mistakes.

Intellisense works by autocompleting items based on what’s located in your workspace. I use Path IntelliSense which auto-completes file names, npm which auto-completes module names and CSS which auto-completes class names.

Snippet packs usually work by creating a bunch of shortcuts so that when you’re typing you can make sure you put down the correct syntax. I have some installed for JS, ES6 React, React Native, Redux, ERB, Ruby on Rails(and I’ll be honest I don’t remember half the shortcuts but I hope to overtime)

Unfortunately for me, I think add-ons have become an addiction at this point and I’m always on the lookout for more. Right now, I’m especially interested in ones that help me monitor my time when it comes to coding. What are some of your favourite VScode extensions?