10 Essential Accessibility Features for Portfolios

Published on 7 August 2023 9 min read

Use of alternative texts for images
Provision of captions for videos
Inclusion of transcripts for audio content
Clear and simple language
Accessible fonts and color contrast
Keyboard navigability
Responsive design
Use of accessible forms
Avoidance of automatic media and navigation
Compliance with Web Content Accessibility Guidelines

When it comes to displaying your work online, the design elements of your portfolio are key. But just as important are the accessibility features in your online portfolios. These are the aspects of your site that make it easy for everyone, regardless of their abilities or disabilities, to engage with your work. In this blog, we'll walk through 10 accessibility features that are must-haves for any online portfolio.

Use of alternative texts for images

First on our list is the use of alternative texts for images. You might be wondering, why bother with this? Well, alternative text or 'alt text' as it's often called, plays a big role in making your portfolio accessible to individuals who use screen readers or have visual impairments. These texts provide descriptions of the images on your site, letting users understand the content even if they can't see it. So, how can you make the most of alt texts in your portfolio?

Be descriptive: When writing alt texts, provide a clear and concise description of the image. For example, instead of saying 'A photo', you might say 'A photo of my latest graphic design project: a bold, colorful logo for a local bakery'. This gives the user much more information about what the image contains.
Use relevant keywords: Including relevant keywords in your alt texts can help improve your portfolio's search engine ranking. But remember, the primary purpose of alt text is to improve accessibility, not SEO. So, only use keywords if they genuinely describe the image.
Keep it brief: Most screen readers cut off alt text at around 125 characters, so try to keep your descriptions within this limit. You want to be detailed, but also succinct.

By using alternative texts for images, you're not just adding valuable accessibility features in your online portfolio — you're also creating a more inclusive online space for everyone to enjoy your work.

Provision of captions for videos

Let's move on to the second feature - providing captions for videos. Just like alt text for images, captions are a vital feature for making your videos accessible to everyone, especially for those who are hard of hearing or deaf. But captions are not just for accessibility, they also enhance the overall user experience of your portfolio. Ever watched a video in a noisy environment and wished it had captions? Exactly!

Make it accurate: Your captions should accurately represent the spoken content and important non-verbal sounds in the video. This includes phrases, words, sound effects, and even relevant musical cues.
Time it right: Ensuring the timing of captions aligns with the audio is crucial. You don't want the text appearing too early or too late, as it can confuse the user and disrupt the flow of the video.
Readable captions: Use clear fonts and suitable sizes for your captions. Also, ensure there's adequate contrast between the text color and the background for easy reading.

Remember, the provision of captions for videos is more than an add-on; it's a fundamental aspect of accessibility features in online portfolios. By incorporating this feature, you make your portfolio a welcoming place for all and enhance its overall user experience.

Inclusion of transcripts for audio content

Let's tune into the third feature of accessibility in online portfolios: transcripts for audio content. Transcripts are a text version of the spoken words in audio content. They are incredibly helpful for users who are deaf or hard of hearing. But, they're also great for those who prefer reading over listening.

Accuracy is key: Transcripts should exactly match the spoken words, including relevant non-verbal sounds or music. Imagine you're reading a book, you wouldn't want any words missing, would you?
Formatting matters: Break down your transcript into clear, concise paragraphs. This makes it easier to read and follow along, especially if the audio is lengthy.
Include speaker identification: If your audio includes multiple speakers, make sure to identify who is speaking. This makes it easier for the reader to follow the conversation.

Transcripts are like the unsung heroes of accessibility features in online portfolios. They not only make your portfolio more accessible but also enhance the overall experience of your users. They're like the cherry on top of your audio content!

Clear and simple language

Next on our list of accessibility features in online portfolios is the use of clear and simple language. Now, don't get me wrong, a little industry jargon here and there can demonstrate your expertise. But, remember: the main goal of your portfolio is to communicate your work effectively, not to show off your vocabulary.

Simplicity is sophistication: Use straightforward language that is easy to understand. You can still sound professional without using too much technical jargon. Think of it this way: would a sixth grader understand what you're trying to say? If not, simplify it.
Be concise: Keep your sentences short and to the point. There's no need to write a novel when a short story will do. Plus, shorter sentences are easier to read and understand, especially for people using screen readers.
Consistency counts: If you're using specific terms or phrases throughout your portfolio, stick with them. Changing terms can confuse your audience, and we don't want that, do we?

Using clear and simple language not only makes your portfolio accessible to a wider audience, but it also helps to showcase your work more effectively. After all, isn't it the goal to make your portfolio speak for itself?

Accessible fonts and color contrast

Let's move on to another important feature of accessibility in online portfolios: accessible fonts and color contrast. Like a well-tailored suit or a perfectly cooked meal, the right combination of font and color can make a world of difference in how your portfolio is perceived. But more than aesthetics, the fonts and colors you choose can also significantly impact the accessibility of your portfolio. Here's how:

Fonts matter: When it comes to fonts, go for readability over fancy design. Choose fonts that are easy to read on screen, like Arial, Verdana, or Times New Roman. Remember, not everyone has 20/20 vision, and the last thing you want is to lose potential clients or employers because they can't read your portfolio.
Color is key: Color contrast is just as important as the font. Make sure there's a high contrast between your text color and the background. This will help people with vision impairments or color-blindness to see your content more clearly.
Size does count: Font size is another factor to consider. The rule of thumb is to keep your base font size to at least 16 pixels. This will ensure that your text is readable for everyone, even those who might have difficulty seeing smaller text.

By paying attention to these details, you're not just making your portfolio more accessible, you're also enhancing the overall user experience. And who doesn't want a portfolio that's easy on the eyes and easy to navigate?

Keyboard navigability

Imagine trying to navigate through a maze, blindfolded. It's disorienting, right? This is how it might feel for someone trying to navigate through a portfolio that isn't keyboard-friendly. Thankfully, with proper accessibility features in online portfolios, we can turn that confusing maze into a walk in the park. Here's how you can improve your portfolio's keyboard navigability:

Tab order: Ensure that the tab order in your portfolio is logical. This means that as you press the 'Tab' key, the focus should move from one interactive element to the next in a sequence that makes sense – from left to right, top to bottom.
Visible focus indicator: Ever found yourself pressing the 'Tab' key multiple times because you lost track of where you are on a page? A visible focus indicator solves this problem. It highlights the element currently in focus, making it easy to keep track of where you are.
Keyboard shortcuts: Consider adding keyboard shortcuts for common actions. This can significantly enhance the user experience, especially for power users who prefer keyboard navigation.

Remember, accessibility isn't just about catering to people with disabilities. It's about making your portfolio more user-friendly for everyone. So, whether it's a potential employer or a curious visitor, everyone should be able to navigate your online portfolio with ease.

Responsive design

Picture this: You've just shared your online portfolio with a friend. They're on their phone, eager to explore your work. They open the link, and... uh-oh. Your portfolio is a jumbled mess on their small screen. Not the impression you were hoping to make, right?

Enter responsive design. It's one of those accessibility features in online portfolios that ensures your work looks good on any device, be it a desktop, tablet, or smartphone. Here's what you need to consider:

Fluid grids: These allow elements on your portfolio to resize in relation to one another, providing a consistent experience across different screen sizes.
Flexible images: Just like fluid grids, flexible images resize depending on the screen size. This way, your images won't spill over the rest of your content on smaller screens.
Media queries: These are like the secret sauce of responsive design. Media queries allow you to apply different styles for different devices, ensuring your portfolio always looks its best.

By implementing these features, you can ensure that no matter where or how someone views your portfolio, it will always be a seamless experience. After all, you've put a lot of work into your portfolio, and it deserves to shine on every screen.

Use of Accessible Forms

Imagine this scenario: an art director has stumbled upon your online portfolio and is quite impressed with your work. They decide to reach out to you through the contact form on your website. But alas, they find it difficult to fill out the form due to poor accessibility. They decide it's too much hassle and leave your site. A potential opportunity missed!

Incorporating accessibility features in online portfolios also means making forms that everyone can use. Here are some key points to keep in mind:

Label fields clearly: This might seem obvious, but it's astonishing how often it's overlooked. Make sure every field in your form has a descriptive label. This will help everyone, especially those using screen readers, know what information they need to provide.
Provide error messages: If a user makes a mistake while filling out the form, make sure you provide helpful error messages. These should clearly explain what went wrong and how to fix it.
Ensure keyboard navigation: Not everyone uses a mouse. Some people navigate websites using their keyboard. Make sure your form supports this by allowing users to tab through fields.

Remember, accessibility features in online portfolios aren't just about visuals. They're also about interaction. And a well-designed, accessible form is a crucial part of that interaction. So don't overlook it!

Picture this: You're quietly enjoying a peaceful evening at home, browsing through some online portfolios. Suddenly, an unexpected video starts playing at full volume, nearly giving you a heart attack. Annoying, right? Automatic media can be a real pain, and not just for the reasons you might think.

Automatic media and navigation are often more of a hindrance than a help when it comes to accessibility features in online portfolios. Here's why:

Unexpected audio or video: Not only are sudden sounds or visuals jarring and unpleasant, they can also be confusing or even frightening for users with certain cognitive disabilities. It's always a good idea to give your users control over when and how media plays.
Auto-advancing slides: Slides that advance automatically can be a nightmare for those who read or process information more slowly. Instead, provide user-controlled navigation options for a more inclusive browsing experience.
Unwanted movement: Animations or scrolling that moves automatically can be disorienting for many users. Plus, they can make it hard to read or focus on the page, particularly for people with attention disorders or visual impairments.

So, when you're working on your online portfolio, remember: automatic isn't always better. In fact, when it comes to accessibility, it's often best to put the control back in the hands of your users. After all, they're the ones you're trying to impress!

Compliance with Web Content Accessibility Guidelines

Let's talk about the Web Content Accessibility Guidelines (WCAG), shall we? Think of them as the 'golden rules' for accessibility features in online portfolios. They're a set of guidelines designed to make web content more accessible, particularly for folks with disabilities.

Here's why it's so important to make sure your online portfolio is WCAG-compliant:

Universal Access: The WCAG is all about making web content more accessible to all users, regardless of ability. That means everyone can access and appreciate your portfolio—cool, huh?
Search Engine Optimization: Here's a secret: search engines like Google actually favor WCAG-compliant websites. So, by following these guidelines, you're not just making your portfolio more accessible—you're also helping it rank higher in search results.
Legal Compliance: In many places, WCAG compliance isn't just a good idea—it's the law. By following these guidelines, you're helping to ensure that your portfolio doesn't run afoul of any accessibility laws.

So, what are some of the key WCAG guidelines you should be following? Here are a few:

Perceivable: Information and user interface components must be presentable to users in ways they can perceive. This means things like providing alt text for images and captions for videos.
Operable: Users must be able to operate the interface. This means your site should work well with both mouse and keyboard navigation.
Understandable: Information and operation of the user interface must be understandable. So, keep your text clear and simple!
Robust: Content must be robust enough to be interpreted reliably by a wide variety of user agents, including assistive technologies. In other words, make sure your site works well with screen readers and other accessibility tools.

By following these guidelines, you'll be taking a big step toward making your portfolio more accessible. And that's a win for everyone!

If you enjoyed our blog post on essential accessibility features for portfolios and want to take it a step further, check out the workshop 'The Ultimate Role-Getting Portfolio Layout' by Jasmine MacPhee. This workshop will guide you through creating an outstanding portfolio layout that will not only be accessible but also help you stand out and land your dream role.