Tag: website design

You know that websites need to be accessible to people with disabilities. But have you thought about your presentations?

Presentation accessibility means that your audience can experience, access, and understand your presentation. There are different considerations to presentation accessibility, depending on whether it is presented live or shared online. Knowing in advance how you want to present allows you to ensure that your content is fully accessible regardless of how the audience will experience it.

Accessibility Considerations for Live Presentations

Fonts

There are two major font categories:

  1. Serif (fonts with finishing strokes on the ends of characters, such as Times New Roman)
  2. Sans Serif (font without finishing strokes, such as Calibri)

It’s generally agreed that sans serif fonts are more readable and accessible at smaller point sizes than serif fonts. Serif fonts are often used for presentation elements that have a higher point size, such as headings and titles.

Several accessible fonts are common on today’s devices. Verdana and Tahoma are two fonts that are considered quite accessible and can be found across device platforms and formats.

For more detail about the accessibility of fonts, see WebAIM’s Fonts article.

Slide Design & Layout

It’s easy to create striking and well-designed presentations using the many available themes and templates. Using a theme’s built-in slide layouts promotes consistent and uniform design, which is essential for usability and accessibility. However, many themes use fonts that are either too small or too ornate to be truly accessible. Search online for accessible themes (there are plenty to choose from), or build an accessible theme using your agency logo, branding, colors, and conventions. Whichever option you choose, stick to the built-in formatting of the slide layouts with few or no modifications. Doing so will significantly increase the accessibility of the presentation with less additional work required later.

Layout Guidelines

Make sure that the slide text is large enough to be seen by your audience. Refrain from trying to fit too much content on one slide, forcing the font point size to get too small. A good rule of thumb for slide content text is between 20–28 points, and for headers aim for 36–44 points.

Here are some other things to consider when laying out presentations:

  • Make sure each slide has a unique header. If there is more than one slide on the same topic, add a numerical identifier to the header such as (1 of 2).
  • Avoid using italics or all caps.
  • Do not use color alone to indicate importance, but bold text is allowed.
  • Make sure to display slide numbers.
  • Keep transitions and animations simple. Fade or appear animations are acceptable, but avoid flashing and flying text.

Content Guidelines

While slide design is important, your content also needs to be developed with accessibility in mind. Keep it brief, focusing on short blurbs or lists of information. It’s easy to overfill a slide with content, especially when font sizes are in the accessible range. When in doubt, break a dense slide into multiple slides to keep readability optimal.

Regarding readability, Plain Language Association International (PLAIN) identifies five general areas to consider when writing:

  1. Audience and purpose
  2. Structure
  3. Design
  4. Expression
  5. Evaluation

To learn more about each area, visit PLAIN’s “What is plain language?” webpage.

Color contrast is also important. Make sure the text color contrasts sufficiently with background colors. This applies to text in images as well. Contrast Checker is a helpful place to test different colors, and the results it provides conform to recognized accessibility standards.

Accessibility Considerations for Online/Shared Presentations

If you’re posting your presentation on a website, sharing it on a slide service, or emailing it to users, there are additional accessibility concerns to be aware of. Some people might use assistive technology, such as screen readers, to access the content. Those users may have difficulty navigating or comprehending your presentation if the additional accessibility enhancements in this section are not applied. Both Microsoft and Google offer guidance specific to their tools, but here are some critical guidelines to remember.

Describing Images

Adding text descriptions to images, commonly referred to as alt text, allows for users with screen readers to get a verbal description of the images in presentations. The alt text should describe the content and function of the image. Some examples include “Photo of a smiling woman” or “Logo and link to our home page.” Images that are decorative and do not provide any content or function do not need alt text. However, when unsure if an image is decorative or not, add some alt text.

Reading Order

The order a screen reader reads a slide’s contents is important. With a word processing document, the reading order is natural as the content generally proceeds from left to right, and top to bottom. On a slide, however, content is added in separate text boxes that can be created or edited in any order. Sometimes the headings are at the bottom or side of a slide, but the intention is that they are read first. Imagine how confusing the content would become if it were read out of order.

Using the built-in slide layouts can minimize problems as they were designed to be accessible with reading order in mind. However, customizing or creating new layouts can lead to reading order adjustments being necessary.

Other Considerations

In addition to adding alt text and adjusting the reading order of slide content, there are a few more aspects of a presentation that should be reviewed if it is going to be shared online:

  • Make sure that links are clear and describe where the link will go. Avoid using only the words “Click Here”; opt instead to use the name of the website as the link itself.
  • If your presentation includes video, make sure it has captions, and ideally, audio descriptions of the action. If captions are not an option, provide a link to a transcript.
  • If your presentation includes audio, provide a link to a transcript.
  • If you opt to save your presentation as a PDF, make sure to enable the setting to allow tags for accessibility to be created; otherwise, all the hard work will be for naught, and the PDF will not be accessible.

Using Automated Tools to Check the Accessibility of Your Presentation

It is clear by now that there are quite a few facets to making presentations accessible. Ideally, accessibility should be a priority throughout the design process. Waiting until the end to make changes and edits is more time consuming and increases the likelihood of making errors.

There are automated tools that scan presentations to check for many things that may have been missed.

PowerPoint has a Check Accessibility tool, but for G Suite, you need to download an add-in. The most popular one is called Grackle.

These tools are a good first step to begin an overall review of your presentation but note that there are limits to what they will catch. For example, some software will place the URL to downloaded images into the alt text field. An automated scan would recognize that alt text was added to the image; however, that text would not be helpful to a screen reader user.

While it might seem like there is a lot to remember for accessibility, it’s easy to manage when you think about it at the beginning of your design process. Implementing accessibility will yield a presentation that everyone can access and enjoy.

As technology users ourselves, we know that it’s not just during the high times that you need to feel the love but also the lows. So when it came time to refresh our broken link pages, we jumped at the opportunity to show our personality and lift the visitor at a moment that could be upsetting. They say: Thank you for visiting, I’m sorry you didn’t find what you’re looking for, and here’s a little joy for your day.

For years, NTEN has used an illustration of a hamster spinning in a wheel to show broken links. It was a great opportunity to show our personality while also offering the option for visitors to search for what they needed. However, now that we’ve added lots more content with an expiration date – ads on our jobs board, for example – we needed to diversify our broken link images to communicate different messages. And, of course, we had to make it adorable – because we’re NTEN.

NTEN’s old broken link image was a hamster spinning in a wheel.

A tiny lift for the greatest of joys

Previously, when a visitor clicked on a broken link to a job posting, they were served a broken link page that looked just like all our others. We realized that we were missing the opportunity to engage the jobseeker further by customizing that broken link page with links to other jobs.

A similar situation would occur when someone came looking for a defunct link to a blog post. If we could engage them with other related options, we get the chance to keep them interested and hopefully, help them find what they are looking for.

And, of course, we also needed an updated broken link illustration for the rest of the site.

Still working on it: NTEN’s new 404 hamster.

We engaged a designer at VaVa Virtual to create a character based on the now-familiar hamster illustration that could convey those three messages and include related content, while also making our visitors smile. The pages were created and segmented by our Web Development Manager Dan Fellini. Because every connection is an opportunity to show a little of ourselves and make sure that our visitors feel the love.

It’s the little things

If you’ve spent a bit of time with NTEN – thank you, longtime members! – you will know that personality is at the heart of everything we do. Our staff are always looking for ways to show you who we are, even in places you won’t expect it.

Dan recently rewrote our cookies code so we could offer you the best experience and maintain our compliance with relevant statutes. There, at the head of the code, are the usual signals that identify who wrote it, plus an ASCII Cookie Monster. Dan included it because he knows that one day, a developer will be looking at his code to see how it works, and that Cookie Monster will bring a little joy to that person’s day.

NTEN Web Development Manager Dan Fellini added an ASCII cookie monster to NTEN’s cookie code.

Help us name our 404 hamster

We are currently looking for a name for our 404 hamster friend. Tweet us at @ntenorg with your suggestions and we will choose two suggestions at random to get a free year’s worth of individual NTEN membership. Who has a name for this little squeaker? We’re all (tiny) ears.

We are planning to refresh our website design later in the year, but there’s one thing we decided to get rid of sooner than later: the image slider we had at the top of our homepage.

Image sliders and carousels were all the rage several years ago, and MANY nonprofit websites (maybe yours) have them right at the top.

quote: (Image) carousels work great for their original intended purpose ... but they are terrible as the star of your homepage.In theory, it’s a great idea. You can showcase more than one message at a time! It moves, and that’s exciting, right?

The problem is that they don’t do a good job of either conveying information or motivating action. Click and conversion rates are terrible, and the clicks they do get are almost always on the first image.

Here’s a bunch of commentary and research, if you want it:

The bottom line is that carousels work great for their original intended purpose, like letting users quickly move through a photo album or portfolio.

But they are terrible as the star of your homepage.

What should you do instead of a carousel?

The current trend is definitely the hero image: that big full-width image, often with a text overlay and even a button on it.

I’d encourage you to go a step further and to think of that hero image as yet another communications channel in your editorial calendar.

Change the hero image based on why people are most likely coming to your website at any given time.

  • Just sent a fundraising appeal? Change the hero image to match, including a donate button.
  • Received great press coverage? Change the hero image to match the topic and include a call to action for these new visitors who saw it.
  • Issue a new report or have a program deadline coming up? Change the hero image to that.

When there’s nothing especially newsy or timely, you can fall back to a default image that more broadly describes what you do. You might have a few of these that you rotate through (just not all at the same time!). Lean toward close-up people images, rather than photos of things or big groups.

This approach does require more focus and prioritizing on your part, but that’s a good thing! It means your messaging will be that much more focused too, which increases the odds of it actually working.

 

A version of this article first appeared on nonprofitmarketingguide.com and is reprinted here with permission.

48in48 is a nonprofit with a unique mission to connect 48 nonprofits in a chosen area with skilled marketing and technology professionals to give them new, professional websites and a fresh marketing strategy—all in just 48 hours. We asked co-founder Adam Walker what motivates them and how they tackle the unique challenges of nonprofit websites.

What makes a great nonprofit website?

A great nonprofit website has to start with a story. If the nonprofit can’t tell their story within one or two sentences at the top of the website’s homepage, that’s a problem. The second thing every nonprofit website needs is a call to action. It’s great that people are on your website, but what do you want them to do once they get there? Every website user must be directed through the site to find what they are needing. A good call to action will help them to do that. And third, every nonprofit website must have the ability to donate. That is the first place many people go when seeking to donate. If the donation process is too long, or complex in any way, the nonprofit will lose out on that revenue, and that person will likely never return.

What are the key challenges nonprofits face in developing websites?


There are several challenges nonprofits need to overcome to build a website. The first is that they need to own and have control of their domain name. Often a nonprofit will have a domain name registered by a volunteer and have no idea that they don’t even own it and have no control over it.

The next challenge is content. Writing content is tough, and there is often a mental barrier to getting started. The secret to writing great content is first to block out the time to write (uninterrupted) and second to think about who you are writing for and what they want to know. Once a nonprofit can do that, they will be able to at least get a draft of their website content complete and then get other people to help refine and improve it.

The last challenge is technical expertise. Many nonprofits have a website, but have no idea how to keep it up to date.

How does your initiative solve these problems?

We have courses that help nonprofits through identifying where their domain name is registered, walking them through content writing with some coaching, and training them on how to use their new website. We want to enable nonprofits to have full control over their websites so that they can leverage them for faster growth.

What kind of nonprofits are you looking for?

We look for nonprofits with the following criteria:

  • Under a $3M dollar budget
  • Has 1 or more staff
  • Is generally nonreligious and nonpolitical
  • Is not on an extreme fringe of a societal issue

What motivates your organization to support nonprofits in this way?

Nonprofits spend all of their time doing good, not looking good. But, with some good marketing, we can help nonprofits look good, and that will help to grow and further their cause in many ways. A new website helps a nonprofit with donor and volunteer engagement. It often also helps them to better serve their community through a heightened awareness of what they are doing.

There are trees, and there is forest. There are anecdotes, and there is data. There are the pinprick pixels of our individual experiences, and there is the vast picture they paint together of the world we share.

The M+R Benchmarks Study is our annual attempt to bridge that divide. This year, we have collected an extensive array of data points from 154 nonprofit participants. Each of them marks a single digital interaction with a supporter: an email opened, a donation made, a petition signed, a website visited, an ad clicked, a Facebook post liked, or tweet retweeted. All told, these add up to 4,699,299,330 email messages, 527,754,635 web visits, and 11,958,385 donations.

NTEN is proud to partner with M+R once again for the latest Benchmarks report. Explore or download it here.

 

Dave Hansen-Lange is a speaker at the 2018 Nonprofit Technology Conference.

So much of our work at nonprofits is about meeting people where they are at. When our donors joined Facebook, we set up pages. When they stopped reading our letters, we invested in small email marketing. Yet, so many of our resources are only in the languages that nonprofit workers speak, and that means we we are missing opportunities to connect, engage, and collaborate with the full breadth of our communities.

Having a website that is accessible in multiple languages is fast becoming best practice for nonprofits that serve multilingual communities. So where do we start?

Thoughtful planning for adding multilingual content is a vital step. There are many considerations when integrating additional languages into your site that can mean the difference between a quality experience for your non-English speaking users and a poor one that just degrades over time and becomes a waste of valuable resources.

Here are three steps to planning a multilingual site.

1. Choose your objectives

Make two short lists of the kinds of content you’d like to make multilingual: Current objectives and future objectives. List your priority languages.

Keep it simple. Each time you add an additional requirement, such as bilingual menu structure or taxonomy translation, consider the cost of developing as well as ongoing maintenance, and content administration. Review examples of sites and note what you like and don’t like about their multilingual approach.

2. Get input from your web development team

Work with your team to develop a technical matrix that accounts for elements including:

  • What types of content will be translated.
  • How the translation will happen. For example, it could be done at entity level, editing individual fields, or at node level.
  • How multilingual content relates to other content.
  • Costs are for each option.

3. Treat this as a web development project

Choose a development partner who has experience with multilingual content, create a technical plan, plot a structure and project methodology and start your build.

We have produced a white paper for nonprofits with Drupal websites that gives more detailed step-by-step instructions on how to develop a plan. While the paper focuses specifically on Drupal, the thinking and planning outlined in it is applicable to any CMS. The more you can plan ahead, the easier this process will be. Gracias, asante, and good luck!

Mark Root-Wiley is a member of the faculty for NTEN’s online trainings and is leading Anatomy of a Website Redesign in January, 2018. A version of this article first appeared on The Nonprofit WordPress Guide and is reprinted here with permission.

When you’re in the planning stage of a website redesign project, it’s important to involve lots of people from your organization. Every nonprofit staff person is a wealth of institutional and experiential knowledge! Your coworkers may rely on your website for important back-office functions or they might interact daily with the people your organization serves online. Hearing these things early in the planning stage will improve the result of any website redesign project.

Collecting feedback from staff serves two key purposes:

  1. Compile information from different perspectives across the full spectrum of your organization.
  2. Generate buy-in for the project by making sure people feel heard and know their needs will be addressed.

These questions will help get that information and start moving your website redesign forward.

[Important caveat: It’s common for organizations to only collect feedback and ideas from staff and other internal stakeholders. That’s a mistake—it’s critical to learn from real users of your website since you’re building the website for them. As the classic saying goes: “You [and your colleagues] are not your user.” That’s all just a topic for another day…]

The questions

Once staff have answered these questions, you’ll have valuable information rooted in your organization’s back-office needs, anecdotal stories about the people who use your website, and useful examples successful and ineffective peer websites. Most of these questions work with board members, too, with only minimal modification.

Your goal is to focus on both the work your organization does and the big-picture needs for the website. Avoid getting too specific with discussions on how things look or exactly how a feature will work during this early planning stage.

  • Why do we need a website?
  • How would your job be harder if we didn’t have a website? What are the key ways it supports your day-to-day work?
  • What questions do you get asked by email, phone, or in person most often? Who are the people asking these questions? Can the website answer (or begin to answer) any of those questions?
  • What are three websites you wish our site were like? What are the specific ways our site should be similar and different?
  • What are three websites our site should not be like? What key problems with these sites do we need to avoid?
  • What are the good things about our website that we should be sure not to lose?
  • What are the worst parts of our website? How would fixing those things make your job easier?
  • What decisions made about the last website lead to the need to replace it now? How can we avoid making the same mistakes?

Collecting the feedback

Once you pick which questions you’ll be asking, you can collect this information in different ways. The right choice for your organization will depend on the number of staff and how you normally communicate with your colleagues. Gather ideas using:

Online or paper surveys

  • Emails
  • Interviews
  • Phone calls
  • Video chats
  • Lunch or coffee dates

Finding the right format can be tough, but it’s worth putting a bit of effort into. Find a way to help people feel comfortable and give them the space required to focus on thinking about these questions. If you’re an organization with lots of one-liner emails, that’s not the right format for this activity.

This isn’t the time for focus groups. Make sure you collect this information individually to avoid “groupthink” or arguments over “what the website should do.” It’s much too early to make decisions about the design, features, or content for the new website.

Next steps

Once you’ve collected everyone’s input, standardize and analyze your findings. Put it all in one place and share your big picture takeaways with everyone. Your goal is to make sure you accurately heard what people said. Sharing this information with everyone is a good transparent practice that helps people understand the wide range of needs and ideas for the future site.

The information you collect, synthesize, and report will be a valuable resource for whoever builds your site (even if that’s you). Immersing yourself in your organization’s needs—not just your ideas about websites—puts you in a perfect place to get started on your next website that will help you improve people’s lives!

As the food bank serving Chicago and Cook County, we have a variety of audiences for our website—all with different interests and needs. Many are looking for pantries and food programs in their neighborhoods, or they’re social workers seeking food assistance for their clients. Others are interested in donating, volunteering, or starting a food drive. Still others want to know about our programs, our staff, and the scope of the need for food assistance in our area.

When we launched a new website last year, we knew that we could improve both the structure and the content of our site to better serve the needs of these many audiences. By continually monitoring our site’s analytics, we’ve been able to increase engagement and reduce bounce rates on our landing pages. We’ve added content that demonstrates our daily impact and made it easier to locate some of the most frequent pages that people visit on the site.

In response to a topic on the NTEN community forums, we completed a Venn diagram of our site’s contents:

A Venn diagram: In the left circle under What We Want people to find is donation form, additional donation options, stories of impact/blog, program information, email signup. In the right circle, under What People Are Looking For is job opportunities, annual report donor lists, mission statement, event registration. In the overlap of the circles is agency locations, volunteer signup, staff bios
Select to enlarge

In this post, I’ll explore how we drew attention to the content we want our audience to find on the site, identified and surfaced the content they’re looking for, and how we use analytics to continue improving.

Placing emphasis with color, placement, and call-to-action copy

When we developed our site, we knew that people looking for food pantries and programs were one of our key audiences. Google Analytics indicated that our map of food pantries and programs is consistently one of the most-visited pages on our site. We made the “Find Food” link a prominent component of our top-level navigation. Since usability research indicates that people usually read web pages in an F-shaped pattern, scanning across the top of the page before scrolling down, we positioned the button in the top right. We also drew additional emphasis to it by making it the only element in bright orange in the top navigation.

Here’s the navigation in our redesigned site:

Select to enlarge

Compared to our old site:

Select to enlarge

The decision to narrow down the items in our navigation was also based on Google Analytics results. By reviewing the Navigation Summary for our homepage, we observed that some of the links drew very little traffic. We moved these items further down the homepage and into the subnavigation on the new site. They’re still present and discoverable, but they now have more context on the page.

Helping people find what they’re looking for

To make sure we’re providing our audiences with what they’re looking for, we have to know what they want to find. We have a few different methods to identify these needs. By reviewing the Search Console section of our Google Analytics, we’ve learned that most of the search terms people use to arrive at our site are either general queries (like “Chicago food bank”) or searches for food pantries and programs in specific neighborhoods. This information informed our decision to make the Find Food link prominent in the navigation and to call it out on interior pages of the site: for instance, the page about our food pantries and mobile programs has a call-out asking “Are you looking for food near you?”

Since around 40% of all traffic to our website comes from search engine result pages, we also took search engine optimization into account when developing our site content. By writing clear, readable, and organized pages and including informative meta descriptions of each page, we ensure that search engines can successfully index our site. As a result, we’ve seen an increase in traffic from search engine result pages compared to the previous version of the site.

In developing our new website, we incorporated a site search feature. By auditing the terms that are entered into the site search on a regular basis using the Google Analytics Site Search report, we’re able to assess whether we should feature certain content more prominently. For example, an increase in searches for a specific event might prompt us to feature that event on the homepage.

Data-driven decisions for continuous improvement

Regular data analysis helps us continuously improve our site to meet our audiences’ needs and achieve our digital communications goals. Each week, we review key statistics about our site’s performance, such as the top landing pages, top referrers, and the amount of traffic we’ve received. This helps us anticipate when we might see higher than usual traffic on our site.

In addition to Google Analytics, a heatmapping tool like Hotjar can be helpful in tracking how people interact with our pages, and how behavior differs between mobile and desktop users. Heatmaps and scroll/click tracking provide an extra layer of information about the content on our site. We can see how far the average user scrolls before clicking to another page, and which buttons and links drive the most clicks. This has helped us reorganize content to ensure that people see what they’re looking for right away. It also helps us test variations in button color, call-to-action text, and different images to see what resonates best with our site’s visitors.

Like many organizations, we’ve seen a steady increase in mobile traffic to our website. Designing a fully responsive site was a high priority for us. We use tools like the Pingdom Website Speed Test and the Page Speed Report in Google Analytics to identify areas where we can improve our site’s performance, especially for users who may have slower internet connections.

Our website is an integral aspect of communicating our mission. By prioritizing our most valuable content and improving our users’ experience on the site, we ensure that we’re reaching the people who want to be part of the work to end hunger in our community.

“The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.”
– Tim Berners-Lee, Director of the World Wide Web Consortium (W3C) and inventor of the internet

As a software developer, I think about edge cases. These are unlikely scenarios that may occur, but must be taken into account. In a Murphy’s Law type of phenomenon, anything unexpected that can happen will happen. Accounting for edge cases is how we ensure functionality of a feature, and how we test the robustness of our program.

This same mode of thinking applies to how we should build out infrastructure for the web. It is easy to assume that the consumers of our website or app are just like us: they have sight and hearing intact, they have keyboard and mouse input, they have reliably fast internet connection. We may conceive of the web as a rather level playing field; after all, users are not inhibited physically or geographically or based on their hardware or software. But this is not always the case, which is further underscored by the lack of access due to socioeconomic issues, and particularly so when people with disabilities face obstacles using the web.

Why web accessibility matters

According to the United Nations, access to the internet is a basic human right. People must be able to access the internet to exercise their rights to freedom of expression and opinion, and everyone should have equal access and opportunity to information and functionality on the web. In doing so, we are supporting social inclusion. That means we are including people across geographical and socioeconomic strata, as well as people with disabilities and the elderly. It has also been proven that optimizing your site for accessibility can lead to better search engine optimization and wider audience reach.

Lastly, accessibility matters because it’s the right thing to do: one billion people around the world, or 15% of the population, have some kind of disability. To quantify the special needs population, 285 million people around the world are blind and visually impaired, with 39 million categorized as legally blind. Given that 80% of these people live in low-income settings, accessibility is not only a disability issue but an economic one as well. Around the world, 360 million people have disabling hearing loss (and to put these numbers in perspective, the US population is 325 million).

And there are many other types of disabilities – for instance, those who have motor impairments rely on assistive technology such as special keyboards to eye trackers, and there are those who are cognitively disabled and have difficulty processing information. Creating an accessible web is geared toward people who are permanently disabled, but they can also benefit fully abled people are temporarily disabled (e.g. arm injury preventing you to use a mouse) or situationally disabled, which refers to very short periods of disability (e.g. unable to hear while in an open floor layout). Thinking about accessibility requires us to think about the breadth of scenarios and situations that may arise.

What we can do

There is so much that we can do to improve accessibility on the web. As developers and designers, we have direct input and influence over products. Even for those of us who are not in tech – whether you have a personal website or have a say in the development of your organization’s website, your voice matters.

Practice empathy

First, I believe in practicing empathy. What I mean by this is thinking about the potential users and consumers of our apps: who are they? What kind of lives do they lead? Do they have a keyboard? Are they paraplegic? Are they parents who are nursing children? All of these situations changes how they may interact with technology. As mentioned earlier, it’s easy to make assumptions about our users in terms of being like us in the sense that they have perfect sight, hearing, mouse and key input.

Be as inclusive as possible

Secondly, we can think about how to be an inclusive as possible and expanding our user interface or product to meet the needs of the most possible. That means making it available to people on mobile, but also to people using screen readers and special keyboards.

Educate yourself

And lastly, we can get educated on ways to make the web accessible. There are misconceptions or limited knowledge among developers and the general population. We are often compelled to learn about accessibility measures out of necessity, but it’s important to be proactive with this subject. Per Web Content Accessibility Guidelines (WCAG), which is the technical standard to make web content more accessible, we need to create interfaces that are perceivable, operable, understandable and robust. WCAG outlines several examples that can be implemented, and there so many useful resources out there on the web, from Google to The A11Y Project.

Final thoughts

There are definitely some quick user interface changes to creating better experiences for everyone. But what is simple is not always easy. Creating accessible products require time, effort, education, and coordination among everyone involved – including developers, designers, product managers, and even end users.

Just remember, by making a product “accessible” to those with disabilities, you’re literally opening your platform or product to everyone. There are assistive technologies (e.g. devices, software, tools) that have helped people with disabilities and at first, served a small subset of the population, but over time, became widely available to the general public. Think of Siri or other voice command features, speech synthesizers, the ability to zoom. Even if you aren’t creating an accessibility product per se, instituting a feature such as high contrast in your app for those who are visually impaired also benefits those who are using the app outdoors.

So go out there, learn more about how to create accessible websites, and improve the lives of your diverse users.

Way back in the late 1990s, I learned HTML on a whim. Inspired by my travels through webrings, I wanted my own place to share my budding activism and earnest poetry. I had no idea the effect it would have on my career, and how it would eventually change my life.

Back then, we were willing to spend hours downloading AOL on our 2800 (yes, twenty-eight-hundred) baud modems and websites were mostly just for big companies or discussion forums. Then GeoCities hit the scene and suddenly anyone could have a website, dedicated to pretty much anything at all.

I immediately planned to make my own site in the West Hollywood neighborhood (I know it was for gay men, but there was no neighborhood for lesbian/bi/queer women, so…). I was working for a small computer consulting firm as an office manager, and I asked our newest technician if he would help me set it up.

In many ways, he embodied the worst stereotypes of computer nerds: he was often rude and condescending, and personal hygiene wasn’t high on his list of priorities. But he knew his stuff. He said he’d help me, but on one condition: I had to learn HTML, so I could do it myself.

He probably set that condition so I wouldn’t keep bothering him with changes and fixes after his initial help getting my page going, but it stuck with me.

After I moved on from that first office job, I found small ways to use my newfound proficiency at other jobs. I made copious use of Webmonkey (RIP) and their wealth of HTML glossary and tutorials, and I kept playing around with various free web platforms like Blogger and WordPress. With enough practice, the code became familiar to me, like a fluent second language.

I’m no developer, not by a long shot, but having a good grasp of HTML (as well as some basic CSS) has helped me be able to:

  • fix weird formatting issues in emails,
  • update one nonprofit’s website for several months after the server crashed (taking with it the custom-built content management system) and all updates had to be hand-coded,
  • save another nonprofit thousands of dollars by bringing email creation in-house, and
  • learn CSS more easily, since there are some similarities.

Most importantly, it helped me eventually transition into doing work that I love and which engages and challenges me every day. In my current role with NTEN, I create and code all of our emails and format our blog posts and web pages (among numerous other communications-related duties). I use my knowledge daily, from basic creation to solving bigger issues like making our emails more mobile-friendly, as well as looking under the hood at other emails or websites to see if I can adapt their code for our purposes.

So how much HTML should you learn? At a minimum, it’s helpful to know how to make text look pretty: bolding, starting new paragraphs, making bullet point lists, etc. Cultivating your attention to detail and nitpicky-ness is also important: precision is key in coding.

Here are just a few of my favorite resources:

  • Lynda.com: an inexpensive way to start learning
  • Treehouse: great beginner and advanced tutorials
  • W3.org: look up HTML codes for just about anything
  • Litmus: resources & forums for advanced email designers
  • WebAIM: tips and tools to improve accessibility

While GeoCities has since shuttered and taken my site with it (though a few intrepid souls have created some archives), today there are myriad options for creating your own site—too many to list, in fact. And though many of the platforms feature easy-to-use drag and drop systems, it’s still quite handy to to be able to understand the underlying coding so you can easily customize templates to your liking.

It’s easier than you think—go forth and code!