How I implemented accessibility for my portfolio website
I am a designer who is full of empathy and I strongly believe in universal design. First of all, let me tell you what I understand about universal design. Wikipedia says,
Universal design (often inclusive design) refers to broad-spectrum ideas meant to produce buildings, products, and environments that are inherently accessible to older people, people without disabilities, and people with disabilities.
In other words, universal design means creating a product that is usable for anyone. When I say anyone, I mean people who have qualified knowledge to use that product. Universal design is hard and sometimes it's impossible to cover everything, but with some extra effort, we can cover 80% to 90% of its aspect of it.
Universal design can be applied to any physical or digital product. Since I am interested in websites, I am going to only talk about digital aspects of universal design in this post. One of the main digital aspects of universal design is web accessibility, which mainly focused on visual disabilities. When I said accessible previously, I referred to web accessibility that was for visually disabled people. In this article, I will mainly talk about making websites accessible for visually disabled people.
Every designer has a portfolio website, but very few of them are accessible.
I got really frustrated and disappointed when I saw a designer's website that was not accessible at all but was full of the saying of empathy and accessibility. As a universal design advocate, I decided to take that little extra time to make my portfolio website accessible. And here began my journey.
The Basics
Visually disabled people use something called screen readers to access web content. Screen readers are special software that will read the content on the screen to them and give some additional powerful shortcuts to help them navigate. There are, multiple screen reading software available in the market. The most popular ones are JAWS for Windows, NVIDIA for Windows, and Voiceover for Mac iOS. As a Mac user, I used Voice Over(Command + F5 to activate) to work on my website accessibility.
To begin with, I was well aware of adding alt attributes to the images and titles to the hyperlinks. These alt tags were super helpful for screen reader users since they could describe what the image was. Therefore, I went through all my web pages and added alt tags and titles to the images.
I saw many portfolios that had images with text but left no clue for the screen readers on what the image was. This made me a little disappointed because I believed that designers should really care about the things they designed that were able to access everyone.
Navigation & Lists
Navigation places an important role when it comes to keyboard users. Make sure that your navigation uses semantic markup like nav tags and role=navigation so that screen readers will detect these areas and enable users to jump from one section to the others.
Lists can be very effective when used in a proper manner. Make sure that you use ul and li tags in proper places such as when there is a list of projects or a list of tags.
Font-icons
Using font icons will block Mac Voice Over. It will stop reading once it finds a font icon. Make sure that your font icon uses aria-hidden=true and add a description of the icon with the sr-only class. Check the below example
<i class="icon icon-close">
<span class="sr-only"> Click here to close </span>
</i>Angular JS & SPA's
Another challenge is accessibility for single-page applications. As there is no page refresh in the navigation of single-page applications, the screen readers will not detect the page change. I have to inform the page change manually using a $.announce. I also wrote a detailed blog post about implementing accessibility for single-page applications.
Roles & Regions
The roles, their characteristics, the states and properties they support, and specification of how they may be used in markup, should all be considered normative. In plain English, they tell you the type of the content you are at, which will be really helpful for screen reader users to identify the type of object and region and accordingly the user can take an action.
For example
<ul role="menubar">
<!-- Rule 2A: "File" label via aria-labelledby -->
<li role="menuitem" aria-haspopup="true" aria-labelledby="fileLabel">
<span id="fileLabel">File</span>
<ul role="menu">
<!-- Rule 2C: "New" label via Namefrom:contents -->
<li role="menuitem">New</li>
<li role="menuitem">Open</li>
</ul>
</li>
</ul>Color contrast
We know that our color contrast ratio should be 3:1 for non-decorative text, sized larger than 18 points or larger than 14 points if bold. Text smaller than that should meet a contrast ratio of at least 4.5:1.
I used http://webaim.org/resources/contrastchecker/ to check the color contrast ratios on my website.
Final thoughts
It's very important for designers to make sure that their portfolio websites are accessible. Here are my takeaways.
- Do the basics right.
- Use navigation & lists intelligently.
- Roles & Regions make life easier.
- Accessibility in single-page applications sucks.
- Check the color contrast.
Vote of thanks
Throughout the process, I was constantly taking help from Cynthia Bennett, Ph.D. Student at the University of Washington and Hadi Rangin one of the staff members at DO-IT.
