This article provides a deep insight on web accessibility and how can we make a portfolio website accessible so that more users can be targeted.
By: Souvik Ghosh
Tags: Web Accessibility, Web Design, Web Accessibility A11y, Portfolio, Web Development

Making a Portfolio Website Accessible

This article provides deep insight on web accessibility and how can we make a portfolio website accessible so that more users can be targeted. Souvik Ghosh Dec 11, 2020·9 min read

Photo by Sai Kiran Anagani on Unsplash

“I wish for a world that views disability, mental or physical, not as a hindrance but as unique attributes that can be seen as powerful assets if given the right opportunities”― Oliver Sacks”

This article will be divided into 3 parts:

Introduction to Web Accessibility. How to make a good Developer Portfolio. How to make the Portfolio accessible.

What is Web Accessibility?

Web Accessibility is the study of practicing methods to ensure that there are no barriers that prevent specially-abled users to access websites on the World Wide Web.

Some popular needs of Accessibility that needs to be addressed are:

Visual: Visual impairments including blindness, various common types of low vision and poor eyesight, various types of color blindness.

Mobility: Difficulty or inability to use the hands, including tremors, muscle slowness, loss of fine muscle control, etc., due to conditions such as Parkinson’s disease, muscular dystrophy, cerebral palsy, stroke.

Auditory: Deafness or hearing impairments, including individuals who are hard of hearing.

Seizures: Photo epileptic seizures caused by visual strobe or flashing effects.

Cognitive and Intellectual: Developmental disabilities, learning difficulties (dyslexia, dyscalculia, etc.), and cognitive disabilities (PTSD, Alzheimer’s) of various origins, affecting memory, attention, developmental “maturity”, problem-solving and logic skills, etc.

Why is Accessibility Important?

Web accessibility is important as the Web and Internet have become important parts of our lives and making sure the web is accessible allows people with disabilities to be able to have equal access to the important services/features the web provides, such as education, online shopping, recreation, health services and more.

Also, it is important that the Web be accessible to everyone in order to provide equal access and equal opportunity to people with disabilities. An accessible Web can help people with disabilities participate more actively in society.

How to make a webpage accessible?

The World Wide Web Consortium(W3C) is an international community that develops open standards to ensure the long-term development of the web.

The principles of web accessibility are:

The guidelines and success criteria are organized around the following four principles, which lay the foundation necessary for anyone to access and use web content. Anyone who wants to use the web must have content that is:

Perceivable: Information and User Interface Components must be presentable to users in such a way that they can perceive. Operable: User Interface and Navigation must be operable. The interface cannot require information that the user cannot perform. Understandable: Information and the operation of the user must be understandable. Robust: Content must be robust enough such that it can be interpreted reliably and by a wide variety of browsers(user agents) including assistive technologies.

These principles are also known as POUR Principles.

If any of these are not true, users with disabilities will not be able to use the web. In one of the upcoming sections, we will see how to meet all the principles.

Tools that can be used to check accessibility

There are a lot of sites and browser extensions that can be used to check to what extent your site is accessible. Out of all these tools, I personally recommend Achecker.

Achecker is very simple to use, with a very simple user interface. We just need to place the URL of the website to be tested or the HTML files or we can even paste the HTML markup.

The outcome will look like:

Achecker Review Page

The three categories of problems that Achecker points out are:

Known Problems: These are problems that have been identified with certainty as accessibility barriers. For example, images missing in an alt attribute. Achecker can parse the HTML of a webpage and identify the image elements that are missing the attribute. Likely Problems: These are the problems that have been identified as probable barriers, but require a human to make a decision. For example: when a link is found that has only one or two words as link text, chances are that the link text is not meaningful enough, so that might not be necessarily so. Sometimes, single-word link text is meaningful, such as “home” often used to represent the link to the home page of a website. Thus a human is required to interact with the review and decide whether this problem is needed to be mitigated. Potential Problems: These are problems that the Achecker cannot identify, that require a human decision. You may have to modify the page for these problems, but in many cases, we will just need to confirm that the problem described is not present. For example, It might identify a movie file embedded in a webpage, but not be able to determine if the movie has captioning or audio descriptions. So, in order to make a complete and accurate check, the system must ask the reviewer to check for them manually and confirm that they are present.

Accessibility Levels

There are three accessibility levels defined and each level is better than the previous level:

Level A Level AA Level AAA

There are 25 criteria that we have to check to reach Level A. To reach Level AA, we have to meet 13 more criteria in addition to the 25 for Level A. Level AAA is the icing on the cake with 23 more criteria.

The success criteria at Level A are designed to be the easiest to meet without much impact on the website design or structure. For example, at Level A, we aren’t allowed to identify something by color alone. Level AA requires a bit more commitment. Continuing with the theme of color, we have to ensure that all the text meets color contrast requirements. The requirement differs somewhat based on the size of the text, but it is actually pretty strict. At Level AAA, the requirement is taken further with an even more strict color contrast requirement for text.

Since we now know what Web Accessibility and how to check for accessibility and also we know a bit about the various levels of accessibility, we will now continue our discussion on how to build a developer portfolio and then make it well accessible.

The link to Achecker is given below:

Developing a good Developer Portfolio

A programming portfolio is more than just a resume. It is proof of the skills that you possess and that you have put in your resume. Also, a good portfolio can be used to create a personal brand that goes much beyond just displaying the skills. Things that are a must in a Developer Portfolio are:

About Me: In this section, there should be a very short and crisp description of who you are, your educational background, and your current status of work/education. Not to forget, there should also be a decent picture of you. For example,

About Me Section

2. Skills: In this section, you have to mention all the things that are your forte. All the languages and technologies that you are familiar with. It can be in the form of a progress bar, showing how confident you are with that skill or how much experience you have in that skill. For example,

Skills Section with Progress Bar

3. Contact Information: All the necessary social links must be provided, most importantly LinkedIn and GitHub. Also, there should be a separate contact page, where the users can directly contact you to ask some queries by sending messages.

All the above-mentioned sections are a must while developing a portfolio. Furthermore, some other sections can also be added based on your choice. Here is a link to my portfolio where you can see all the things that I have added:

How to make the Portfolio accessible?

We will follow Shneiderman’s Golden Rules to make the website accessible:

Strive for consistency: We need to use familiar icons all throughout our website. For example, for mailing, we can use an icon as an envelope because it's familiar and used almost everywhere. Also, we need to use the same primary color throughout our website. That’s what makes it even more consistent. Offer informative feedback: We should let the users know exactly where are they on the page. So, we should divide the pages into different sections, where each section should contain distinct information. There should also be links to travel to different sections instead of scrolling. Design dialogue to yield closure: We should tell the users where their action has led them to. For example, after submitting a form, we should confirm the user that their form has been successfully submitted and should not keep them in doubt.

Confirmation page after submitting a form

4. Offer simple error handling: The error messages should not sound too rude or should not be displayed in such a way that the users are not able to understand them. For example, Page not found error, form not submitted, error in filling out the details, etc.

5. Permit easy reversal of actions: The users should be able to undo their mistakes easily. The system should ask for permissions before submitting a form and also before asking for details from the user.

6. Support internal locus of control: The users should get a feel of what they are doing. Every action should make the user feel that they are actually doing something. For example, giving hover effects, giving click effects, etc.

7. Reduce short-term memory load: The information provided on the website should be short and informative. There should not be a bulk of information provided on just a single page. Information should be distributed all over the website.

8. Enable frequent users to use shortcuts: The users who have visited your site a number of times should not feel alien to the actions of the website. Thus, not many changes are to be made unless absolutely necessary, and even if the changes are made, the users should be informed about it beforehand.

Apart from all these, we also need to make sure that we handle all the popular accessibility needs that are discussed in the previous sections:

Vision: We should provide descriptive texts as alternate tags for all the images and hyperlinks so that they can be interpreted by a screen reader.

Alternate text description for images

2. Mobility: We should build the site in such a way that the users can work even without mouse action. For example, enabling tab indexes as well as a tap to scroll button will do a world of good.

3. Auditory: If the site contains any audio or video information, its equivalent captions should be displayed.

4. Seizures: The animations displayed should not be too fast, the colors should not be too bright, and should not contain flashy things. We can also add mode switching themes if possible.

5. Cognitive and Intellectual: As said previously, there should not be too much information at one particular place. Information should be distributed and structured evenly throughout the website.

Conclusion

So, now that you have a brief idea about what accessibility is and why it is so important, and also how to implement it in your systems. I hope you all will implement it and make this world a better place for everyone.

References