Schedule A Call

Accessibility Standards: What They Mean For You

Why Accessibility Standards Should Be A Priority When Configuring Your Website

When it comes to web accessibility standards, the most widely respected set of rules for websites and web applications are those laid out in the Website Accessibility Initiative. The Initiative, drawn up in 1998 by the World Wide Web Consortium, is a list of standards for websites to accommodate hardware and software to ensure equal access to users with disabilities.

That being said, for a lot of websites and web applications, upholding accessibility standards isn’t a requirement so much as it is a smart move. Much like making your website mobile responsive, supporting accessibility standards is a good way to prepare your website for all users.

To start with, let’s talk about the legal ramifications of accessibility standards.

What’s Section 508?

You might not have heard of the Website Accessibility Initiative, but you might have heard the phrase “accessibility compliant,” and, even more intimidating, “508 mandate.” A 508 Mandate is how the U.S. legally enforces accessibility standards.

Section 508 was an amendment made to the U.S. Rehabilitation Act which mandates that all information technology used by the federal government must be accessible to people with disabilities.

A 508 Mandate is limited only to the federal sector and websites receiving federal funds; it doesn’t apply to the private sector. If you are a privately owned business, you are not legally required to be 508 compliant.

For the private business owner, it’s highly unlikely that you’ll be receiving a 508 Mandate any time soon. That being said, making your website 508 compliant is easy to implement and another step towards building up your web presence to be as strong as possible.

How do Accessibility Standards Work?

Making your website compliant with accessibility standards means that you configure your website to support assistive technology. The main forms of assistive technology are text-to-speech software, screen readers, and desktop screen magnifiers. This software, and the accessibility compliances on your website, work to support users who need assistance with:

  • Visual
  • Motor ability
  • Auditory
  • Seizures
  • Cognitive

The W3C (World Wide Web Consortium) provides a wide variety of resources to help web developers, designers, and content administrators build their websites while keeping with accessibility standards, including a checklist of items included in their Web Content Accessibility Guidelines. The U.S. federal government has modeled their Section 508 around the items listed in the W3C Guidelines, and generally they represent the rules followed by web users universally.

How to Make Your Website Accessibility Compliant

Since the initial release of the 1998 Website Accessibility Initiative, accessibility standards have been updated to meet the modern web experience. Here are a few points that you can easily implement.

  • Alt Text: For every non-text element (audio files, images, graphs, GIFs), a textual description - commonly called “Alt text” - should be provided. For users browsing with screen reader technology, this is incredibly helpful. Alt text won’t be displayed on your page, but it will be registered by search engines and screen reader technology. This goes for dynamic content as well, if you have content that changes in response to personalization, the alt text should change to match new elements. For example, shopping suggestions that update in response to a user’s browsing and shopping history should have updated alt text. This becomes slightly more complicated with image carousels and sliders that are so common on sites today - since they have both images and UI to access the images. Be sure to select a carousel library that supports accessibility.

alt text example

Note: In Drupal, image fields offer admin the opportunity to write alt text. For more information, visit our guide for configuring images in Drupal.

  • Clear Language, Easily Seen and Easily Understood: Try to make language as clear as possible on your website, in both visibility and expression. For example, underlining, increasing the color contrast ratio, and changing the hue, saturation, and brightness of colored text to accommodate users. There are free tools and services that will review your graphic design for accessibility, which can be especially helpful for color-deficient users.
  • Stand Alone Web Content: Make sure that your page can still be navigated and read without any scripts or programmed elements running, like Javascript or CSS. Mac’s have a built-in screen reader (commonly called SR’s), which is a great way to test how your page reads. In addition to assistive software, this also prepares your website for users with slower internet connections.
  • Use of ARIA tags: ARIA (Accessible Rich Internet Applications) tagging is a more recent development and is commonly used in HTML. This allows a developer to add special tags to sections of the page to indicate the type of content or if it should be skipped by assistive technology. This is particularly useful for screen readers, so they can identify primary navigation vs. secondary navigation, or provide “skip tags” for elements that are not important to the page. You can read here for a full list of ARIA elements that you can add to any page template.
  • Captions: Provide a textual description of any visual elements in a multimedia presentation. For example, if you embed a slideshow on your website, provide a written description of the images so that users using screen readers can understand. For videos, provide captions or a written dictation of the video’s audio. This has become particularly difficult in the age of big infographics - providing accessible infographics requires some forethought.

Note: You can visit the W3C website for a checklist of success criteria for Web Content Accessibility.

The “If All Else Fails” Rule

The W3C site advises admin that if they can’t configure their page to meet these standards, they can always design a separate page that does and then link it to their original page, maintaining the web design but making information accessible to everyone.

That being said, website management has come a long way since accessibility standards were first drawn up in 1998. In some cases - like with the Drupal CMS - websites provide accessibility options to admin or have them already built into their system. With recent website management and web browsing developments that support accessibility standards, it’s unusual for admin to have to create a separate page to preserve their web design.

 

 

The Benefits To You, The Website Admin

Typically search engines, like Google, that crawl through your website prioritize search ranking based on a lot of the same features as accessibility standards listed above, such as:

  • A semantic page structure (If you’re using headers, they follow a tiered h1/h2/h3/p format)
  • Descriptive page titles
  • Breaking up your content with descriptive headers
  • Alt text for any images

Though, as far as we know, web accessibility compliance itself is not a ranking factor in Google’s algorithm - yet.

We call this writing good “semantic” code, meaning code that explicitly communicates what it is and what it’s doing. Arranging your header formatting in cascading order and structuring your web pages in a way that makes sense achieves accessibility compliance as well as Search Engine Optimization. Like including links to your social media accounts or designing your website to respond to mobile devices, configuring your website to meet accessibility standards is a way of making yourself visible to all internet users. And while it is legally a requirement for some, it is a best practice for all.

If you have any questions regarding accessibility standards that we didn’t cover, or need some guidance on the process please feel free to contact us directly.

Marketers Need to Control Their Content

Why my website is at the center of my marketing strategy

It wasn’t that long ago when I was responsible for all digital marketing but had no input, control, or access to the primary digital presence—the website.

I always felt frustrated about the fact that as a “digital marketer” I couldn’t leverage the digital channel that had the most reach, impact, and effect to it’s fullest extent. For whatever reason, early on, marketers were not entrusted with the keys to the car. We were expected to wash it, maintain it, improve it, but we couldn’t drive it. I’d get questions like,

  • Why don’t we have more traffic to page A?
  • Why can’t users get from page A to page B?
  • Why don’t we have more leads/conversions?

and all the while the answers I could give felt like “my best guess.” The answers were always based on intuition, assumptions, and trying to tie data to a hypothesis, but I couldn’t give an answer that I felt strongly about because I didn’t have input on the strategy or creation, I didn’t design it, or build it. I can’t make a Ferrari out of a Gremlin, but that felt like the expectation.

Marketing as an industry has not only embraced digital technology, but it has also seen it disrupt the practice more than I think was ever expected. It’s to the point now where there are some marketers who will only do digital. There was a transition about 6 years ago where marketers - even ones who still didn’t understand how the technology worked - started to embrace the power of the online world. In large part, this was because of the reporting and visibility into the success of a marketing effort.

 

"As I look to optimize established marketing tactics, and plan new marketing strategies I place my website in the middle of my campaign cycle."

 

This meant that B2B and B2C companies started to adopt social media marketing by creating Facebook pages, starting SEM/PPC campaigns via Google Adwords, and starting Email Marketing Campaigns to improve direct communication with their consumers. Now, marketers might be one of the most digitally obsessed groups of people always looking for the “new,” great technology that will give them an edge. (Side note: I’ve heard several marketers and marketing agencies over the past few years who have claimed they will not do any “traditional marketing campaigns,” that is, non-digital marketing ever again. I think this is a bad stance, but that is a different topic.)

 

 

However, even though there was a major adoption of digital technologies in our profession, one of the channels in our arena that still seemed to not be included as a part of our marketing strategies was the “website.”

There are a lot of factors that restrict marketers from incorporating the company website into the overall strategy, and I believe that this is because it feels like you have to know how it works to control it, unlike Facebook. Marketers pushing for the ability to control websites and drive the visual and functional direction has lead to the rise in the Content Management System (CMS) driven website platforms like Drupal and Wordpress. Marketers are, all the same, we love having our websites built on platforms that we can control the functionality of, easily implement changes, add new content, create landing pages, update the visuals and improve our SEO and brand position. As a group, we are also impatient so we don’t want to have to wait on IT to change things because it will take too long, and we’ll probably want to change it again by the time IT gets around to it.

One of the other traits that we marketers share is that we’re all control freaks. And, really, rightfully so. Our jobs, careers, and ultimately our reputation are on the line if our campaigns don’t perform. It is still common place to get an annual directive of a budget and growth target, and if you don’t grow the company by the determined amount in the specified timeframe and within your budget you can start looking for a new job.

It used to be that a website was something that only a few major brands or the "dotcom” companies had. Then it became something that everyone had, but was viewed as something you created once and that was it - like a monument honoring your company. Now it has gone beyond that and in a lot of cases, IS THE BRAND.

Here is an example: Recently, I was talking to a VP of Marketing who has been part of a brand that was a digital first company (i.e. had launched their product with only a web presence) and they were about to launch their first brick and mortar location. Their primary concern was that their physical storefront had to look and feel like their website.

Why is that?

The fact is, their website, like ours, has become the cornerstone of their brand because it is the most public facing element of a business.

 

"More people see your website everyday than you will talk to in a year."

 

In any industry, a website is the first thing that a consumer, of any generation, will look for first. Which means that more people see our website than our office, meet our president - Greg Bear, not Potus - connect with one of our developers, or even talk to our clients. This is the case daily, and even hourly.

As marketers, we build a messaging framework, a ladder, have voice & tone guidelines, and think endlessly about the right copy that is going to sink its teeth in our target market, or at least, catch them from the right angle.

Social channels, ads, all are domains you don't own and all come with strong limitations - character length, look and feel, etc -- they might have an audience on social, but you can only play by their rules - which limits their effectiveness. Nothing is stronger than your own domain for managing the message. Which is why every ad campaign we run, social media post we publish, or event we attend has the aim of driving traffic to our website.

Why would anything else be the nexus of a strong marketing strategy?

A website, beautiful and highly functional, is no longer a business element that is nice to have, or a way of keeping up with the jones’ - it will make or break your company. It is your identity.

Responsive Web Design For All Screens

Responsive Website Design - Websites that Accommodate Desktop, Tablet, and Mobile

A Successful Approach to Responsive Website Design & Development

As internet users began to increasingly rely on mobile devices to search, surf, and purchase online, websites started to build specific mobile responsive sites, like m.yoursite.com, that customers would be redirected to. It quickly became apparent that manufacturers were going to come up with all sorts of various screen size and use that as a point of differentiation in their marketing tactics. This was a nightmare for web development. Enter: Responsive.

All of the websites we have built in the last few years have been built to be responsive - we consider it an irresponsible business practice to create a desktop-only site at this point. Mobile and tablet users are a substantial and growing audience for your website--up to 50% for many of our clients--and need to have a user experience that is optimized for their device. In addition, search engines are rewarding sites that have a solid mobile experience.

The question at this point isn’t “Should we have a responsive website?”, the questions are:

  1. How should we approach the mobile design so that it doesn’t feel like an afterthought of the desktop site?
  2. What are the most important features of any mobile website?

And, going deeper, what is really at the core of these questions is another question: “How do we provide an experience, regardless of the device, that resonates with our users and supports our growth?

Time Spent with the Internet by Device.

Search Engine Watch, reports that as of early 2014 “Mobile Exceeds PC Internet Usage for First Time in History

 

Think about it this way: even if mobile or tablet traffic isn’t your leading device for website users currently, how much could your revenue be increased by having a better user experience for a user on a mobile device? Now think about that compounding as your mobile traffic increases by 1%, 2%, 10%, and so on.

You could be leaving a lot on the table now and even more in the future. Let’s take a closer look at what it means to be responsive, how it works, and the implications of responsive design and development demands.

Responsive Web

Let’s establish a definition for use in the conversation. Responsive Web: a website design that responds to the canvas (i.e. screen space available).

The objective is not to deliver an identical website to all users regardless of their browsing device, but rather to provide a consistent experience in quality that maintains the brand in all contexts. The design adapts at various breakpoints to optimize a range of screen sizes, which changes the user experience. For example, we’ll have a design and navigation specified for 280px -> 480px, 480px -> 700px, etc. Inside of these ranges the width will respond to the user’s screen.

3 Ingredients as (outlined by Ethan Marcotte in Responsive Web Design)

  • Design: flexible, grid based layout
  • Content: flexible images and media
  • Implementation: media queries (the CSS that makes it all possible)

Smartphone, tablet, desktop… we don’t know what the next resolution or device is going to be, so we design with a flexible grid and breakpoints. We accomplish this by designing, reviewing, and consulting with graphic designers to ensure designs are optimized for the web. Content is organized and arranged in order to flow. Also, there is a single web URL for all users;, rather than having a different domain for different devices like the mobile website approach a few years back.

The outcome is that some content is minimized or hidden, and collapsible content is toggled to display as needed. Former trends with ‘hover’ or ‘mouseover’ are no longer favored in designing for touch support.

 

 

Here is how you address different canvases.

 

Addressing Mobile - Responsive Web Design

Previous mobile assumptions were that 1) the user had a slow internet connection, and 2) the user was limited/confined to that device. Now that’s all changing--users can connect to Wi-fi and browse from their couch. Users are also starting searches on their mobile devices and then continuing their search on their tablet or desktop.

Visual features are just as important on mobile sites. Mobile sites should be as feature-rich and resourceful as their desktop versions. Careful planning can ensure that reconfigured desktop content is just as useful and visually appealing on mobile devices.

Addressing Tablets - Responsive Web Design

Designing sites for tablets has been a bit tricky because tablets are either designed to implement the mobile or the desktop version of websites. This results in a poor user experience--the navigation might be limited, or a mobile design overblown, resulting in lots of empty space on the display. To get around these issues, you need to design for the tablet experience with a happy mix of mobile and desktop design.

Navigation is important to the user experience and content strategy on any website or device, but is often overlooked when designing for a tablet. We recommend that all our clients use a navigation that is appropriate for each device, meaning they end up with a site that has a different navigation for desktop, tablet, and mobile devices.

Keep in mind that a tablet will almost always load higher-resolution photos because of the Wi-Fi connection, so if you’re using lower quality of content or images for the mobile breakpoint, don’t make the mistake of using the mobile content for the tablet site. This will create a low quality look and a bad user experience.

One great example of a company that has a strong user experience on all devices is our client Seattle Chocolates. If you change your browser while looking at their site, you’ll notice that not only does the content scale appropriate to the device size, but so does their navigation.

Addressing Desktop - Responsive Web Design

In addition to the increase in mobile device use, we have also seen a proliferation of wide desktop screens. We are currently designing desktop site for a 1200px base screen, but also looking upwards at 2000px screen sizes and larger. One of the design issues we often encounter is as larger images scale up, they need to remain proportional in order to look good. As the width increases, so does the height. That height growth can push the content on the page way down, which requires careful design management. This can be addressed in development by putting the image inside a “crop frame” that it moves behind - though this can have the unfortunate effect of cutting heads off of people in an image or otherwise cropping an image oddly.

We leverage the grid system of Twitter Bootstrap* as the structural base for the website themes we customize and build. We also adhere to web standards and best practices in responsive development with current HTML5 and CSS techniques to ensure your website looks and works great on every device.

So how do you successfully create and implement a responsive design for your brand?

 

Responsive Website Design Successful Approach

A responsive design provides a consistent experience in quality that maintains the brand in all contexts.

The most important “feature” of any mobile site is delivering a contextual navigation relevant to the use characteristics of the device, so the user can easily find what they are looking for. This stems from an understanding (ideally based on analytics data) of the content and locations mobile users are accessing. This allows you to simplify the overall navigation for mobile devices, and bring forward the most mobile-relevant experience in terms of navigation, graphics, and content.

Here’s how we recommend approaching your responsive website design:

  • It’s not enough to “design for mobile first.” You must consider all possible devices from the outset. It doesn’t matter which direction you design first if you aren’t considering all aspects.
  • Start with a smaller footprint and scale up. Load in images with lower resolution. Basically, strip out everything that isn’t needed. Increase the amount of content as you scale up to larger devices and your bandwidth and space increase.
  • Consider business objectives. Strip content to its bare essentials on mobile sites.
  • Keep the user experience in mind experience in mind. Don’t overlook load speed and usability. The more design and functionality you have on mobile, the more JavaScript you use, and the worse your page will function.
  • A good thing to do is dig into GA and look at content currently being accessed with a mobile filter.
    That tends to be an ah-ha… like “oh wow people really are reading my big blog post on their phone.”

Throughout the process constantly check to make sure that your brand is consistent across all device experiences. Your sites shouldn’t be pixel perfect identical experience, but should reinforce and drive the brand’s marketing.

There are several solutions that offer shortcuts and ways to quickly build a mobile site, but doing the bare minimum doesn’t tell your customers you respect their time or opinions. We do not recommend or use those with our clients. It takes a cross-discipline expertise to build a great mobile site. It starts with design, a good understanding of your user demographics and their current and potential mobile usage, deciding how to protect and present your brand in a variety of screen packaging formats, and ultimately having the technical know-how to build a front-end experience that exceeds the demands of users on every screen.

If you would like to continue the conversation about mobile or responsive design, connect with us directly at info@beargroup.com!


*Twitter Bootstrap brings both CSS and JS components to a customizable base theme. It’s a great time saver in that supports responsive grid system and is packed with popular functionality like collapse, carousel modals, and more. (http://getbootstrap.com/)

For additional information on responsive web design, read Responsive and responsible (as outlined by Scott Jehl in Responsible Responsive Design)

Contact Bear Group

Contact us today, and let's start planning your next web development project!

If you have any inquiries about our services or how we work, let us know. We’d love to be your web development team and help you reach your goals.