development

5 Ways To Improve Accessibility On Your Website

Accessibility elements are easy to overlook on your website. Most of the changes that make a website more accessible won’t appear to do much visually, but rather help improve the usability of your website to people using assistive technology. By optimizing your website to be more  accessible, you make a significant amount of people have a better experience, and you also protect your website from being sued for lack of compliance with accessibility standards and legislative requirements.

We have gathered five tips on how to get started with improving accessibility on any website.

#1 Use Alt and Title Tags On Images

What are alt and title tags for images?

Alt tags are  a text description of what an image looks like that gets shown if an image fails to load. Screen readers can read the alt tags, helping people with visual impairments understand what is being shown on the screen. Alt tags should be a description of what exactly an image looks like.

Why are alt and title tags on images important?

Visual impairments are very common. According to the WHO, at least 2.2 billion people have a near or distance vision impairment.

How do I implement image alt and title tags?

If you’re using a CMS like WordPress, just make sure you’re filling out the alt option when uploading media. To check if an image has an alt tag in the code, right click it and look for alt=”The alt text” in the <img> element.

#2 Use Descriptive Hyperlink Text

What is descriptive hyperlink text?

Descriptive hyperlink text means that the text you apply your hyperlinks to should describe where the link is going. Avoid the classic “click here” pitfall, and instead write your sentence first, then go back and choose a logical place to put the link. If done properly, linked text should make sense when read out of context.

Why is descriptive hyperlink text important?

Screen readers can be used to skip around every link on the webpage and if one of them was “click here” the user, presumably vision impaired would have no idea where the link may lead to. In addition to benefiting accessibility, descriptive hyperlinks are good for SEO.

#3 Ensure Sufficient Color Contrast Ratios

What is color contrast?

Color contrast ratios refer to how visible two colors are in relation to each other.

Why is color contrast important?

Color blindness affects a large amount of the population, it’s important to make sure everyone can see elements of the page well. This is especially important with text, if the user can’t see it they could miss key information on the web page. The WCAG requires that most text, or images of text have a contrast ratio of at least 4.5:1 to meet the second level of compliance, except in the case of large text (3:1 ratio), incidental or decorative only, or brand logos.

How can I fix my color contrast?

There are tools available to check your colors when picking out your palette. There are several online including the WebAIM Contrast Checker and contrast-ratio.com. There’s also a built in way to scan your website in Chrome based browsers. To use this, go to developer tools, hit the settings button, then go to experiments and enable CSS Overview. This tool checks the color contrast ratio across an entire page and automatically finds compliance issues. For example, this is what the results of a page’s contrast issue scan might look like:

example of website color contrast analysis

#4 Ensure Your Page Structure Follows a Logical Order

What page structure?

A logical page order is when the elements of the page are presented in the order that they’re laid out in the markup code.

Why is logical page structure important?

Screen readers are expected to read things in the order they’re presented visually, but they just parse the markup code. So if the page elements are out of order it causes issues when using a screen reader . This also affects people using the tab key for navigation.

How can I improve my page structure?

When initially creating a website, try to avoid using CSS to move things out of their natural flow. A search element that is at the top of the page should be towards the top of the page in the markup. This isn’t quite as common but you can sometimes find it by tabbing through elements where you will run into issues.

#5 Use Descriptive Headings

What does it mean to have descriptive headings?

Descriptive headings means that you are using headings that are clear as to what information you can expect to follow the heading. Being clear and concise is important here. Headings should not be too long but should not be too short that it becomes too general. The headings should be descriptive enough that anyone reading themselves or with a screen reader will have a good idea of the information to follow.

Why are descriptive headings important?

Many people that use screen readers jump between paragraphs of text without reading the content in between. This makes it important to have descriptive text, but we often avoid that because it doesn’t look as clean. This is more important than visuals, it affects usability, it should be prioritized.

Get Started With Website Accessibility Improvements

Looking for a team of developers who have experience in making websites more accessible? We have a Solution for that. Connect with our team today to get started.


Want to stay up to date on all things Solution? Join our newsletter.

    How The Domain Name System (DNS) Works & Common DNS Records

    Here at Solution Agency we have launched hundreds of websites during our 25-year existence.  One of the most misunderstood tasks of a website launch is making DNS changes. DNS is one of the most critical parts of any company’s website uptime and unfortunately, most people don’t even know that it exists. So we here at Solution we thought it would be beneficial to take a moment and explain DNS and how it works.

    What is DNS?

    DNS stands for Domain Name System. Think of your DNS as a traffic cop of the internet. DNS handles pointing web traffic in the direction it needs to be going in order to keep things streamlined.

    Think of it this way, the DNS has two hands. One is pointing emails to your email IP address and the other hand is pointing website viewers to your website IP address. Now, there is a lot more to it than this, but these two principles are a good starting place when you are new to working with DNS.

    Most people only care that their website and email are working. Typically, when it’s not working, they call their web or IT person and have them fix it. However, it is still good to know some basics about your DNS regardless of if you are the CEO or the IT person. I have included some terms as well as some brief explanations below to help you get a basic understanding of DNS .

    A Visual Overview of How DNS Works

    a visual overview of how DNS works.

    Where is Your DNS Located and How is it Managed? 

    DNS is a series of records that are most commonly hosted on your website registrar’s(like GoDaddy or Network Solutions) nameservers. Nameservers are servers intertwined with the Word Wide Web that store DNS records. Every single domain name is linked to nameservers. Often nameservers are thought of as phone books containing the IP addresses associated with domain names. Nameservers connect your domain to your hosting provider. They let the internet know what specific server hosts a particular website.

    The Most Common DNS Records and What They Do

    A Records

    The A records are used to point a domain or subdomain to a certain IP  address. The A record is the most common type of DNS record used – and the one you are most likely to encounter. Its main function is to point a domain or a subdomain to a particular IP address. In other words, thanks to the A records you are capable of reaching a website on the internet.

    Why is it called an A record?  The “A” actually stands for Address, because this kind of record helps your computer find the correct server when you try to access a website.

    For example, if you have a site called “mywebsite.com” and its A record points to 1.2.2.1.1, it means that when someone makes a request to mywebsite.com it will be directed to the server which has assigned the IP address 1.2.2.1.1.

    Here is an example of an A record:

    screenshot of an example of what as A Record looks like

    If you have not correctly set your A record for your domain to the server your website is actually hosted on, your domain (website URL) will not be linked to your website and people will not be able to travel to your website when our domain name.

    MX Records

    MX records stand for Mail Exchanger. This record is vital to the proper functioning of your email system. MX records tell the internet which mail server is responsible for managing and hosting your emails.  

    Most MX records have more than one record and are ranked in priority order. The reason for this is that if the first priority MX server is unavailable then the next priority server will be used to ensure that your email is working properly.

    A very commonly used mail service is Google’s G Suite. See below for an example of Google’s MX records:

    screenshot of an example of what Googles MX records look like

    CNAME Records

    CNAME stands for canonical name and this kind of record is used to create an alias between two different domains.

    For example, you can point mywebsite.com and www.mywebsite.com to the same website hosted on the same server by using a CNAME record. Here is how this would be implemented:

    An A record would be created for mywebsite.com and pointed to the server IP address. You would then create a CNAME record called www.mywebsite.com and point that to mywebsite.com. The advantage of doing this is that if you needed to change the website IP address you would only have to make that change to one record instead of two.

    A couple of important notes about the CNAME DNS record:

    1. If there’s no A record, then the CNAME record won’t display anything when you try to access the record.
    2. You must always put a period at the end of the CNAME record. The period at the end of the domain name is very important because if you don’t use it, then the DNS server will assume the domain is a subdomain.  So instead of subdomain.domain.com you will get subdomain.domain.com.domain.com Some systems include the dot automatically, but if you are not sure about it is always better to type the dot on your own.

    Here is a sample CNAME DNS record with corresponding A records:

    a screenshot of an example of what a CNAME DNS record with corresponding A records looks like

    TXT Records

    The TXT, or text records, have different functions, but all of them are used to display certain kinds of information or data for sources outside of your domain. The TXT records are used to manage important records such as SPF and DKIM records discussed below.

    SPF Records

    The SPF record, also known as Sender Policy Framework record, is one of the most important records in regards to email.  SPF records are important because they will tell which hosts are authorized to send emails from a particular domain. 

    If an SPF record is not created in your DNS records, chances are that your emails will be rejected or blocked by email recipients. To create an SPF record you will need to use a TXT record.  One of the most common  SPF records is for Google mail.

    Here is an example record: 

    screenshot of what a SPF record looks like

    If creating a record like this seems daunting, don’t worry!  Many third-party email services providers like Google will provide you with their SPF record. All you have to do is add the TXT record to your DNS. Keep in mind that there shouldn’t be more than one SPF record per domain. If you try to create more than one it could lead to an error in the DNS zone or it will create a conflict for other servers where they are unable to detect which is the correct record.

    There are some nice tools available to check and see if your domain has a valid SPF record. MX toolbox has a great tool specifically for this purpose.

    DKIM Records

    DKIM records, which stands for Domain Keys Identified Mail, is an authentication mechanism for email. DKIM records were created as a way to fight SPAM emails. 

    When a company utilizes this type of TXT record it is making itself responsible for the emails that are sent from its domain.  The DKIM record provides an encryption key and digital signature that verifies that an email message was not forged or altered in any way. This will improve the security of your email and increase deliverability.

    Here is an example of a DKIM record:

    screenshot of an example of what a DKIM record looks like

    As you can see, a DKIM record is a long encrypted TXT record that is unique for each domain. Fortunately, email service providers such as Google have instructions on how to easily create DKIM records

    Managing Your Web Presence Doesn’t Have to Be Daunting

    Though this article only scratches the surface of the power, and various aspects of DNS, hopefully, it provided you with a little more information on the basics of what DNS is and how it works.

    Have DNS questions? Need help on your next web development, design or digital marketing project? Contact Solution Agency, we are your partner solution for all things digital. Our expert team of web developers, designers, and marketers is standing by to help you with any project that you have in mind.


    Want to stay up to date on all things Solution? Join our newsletter.

      Surviving Your First 90 Days as a New Developer: Top 5 Tips

      Landing your first job as a developer is exciting, but it can also be scary diving into a new career. You’ve been through months, sometimes even years, of learning and practicing all to land your first job. Your first day of work is finally here, you are feeling nervous, your confidence is low, and imposter syndrome kicks in. It’s completely normal to feel nervous – I know I was for my first day. As a new developer working at a digital agency, here are the top 5 tips I have learned in my first 90 days that have helped me.

      5 Tips To Help New Developers

      1. Communication

      I used to think that being a developer was sitting at a desk all day just coding. I couldn’t have been more wrong in that assumption. Communication is a big part of being a developer. You have to be able to communicate effectively with your clients and with your team. 

      As a new (and even as a veteran!) developer it is very important to communicate if, and when, you need help. Don’t pretend to know everything – everyone was new once and even your senior developers don’t know everything!. Communicate with your senior developer(s) and ask a lot of questions! Don’t be afraid to be the newbie – be confident to ask the right questions to get the information you need to succeed at your tasks

      2. Keep Learning

      No matter how much you think you know, how many certificates you’ve acquired, and courses you’ve completed –  you will never be done learning. Thinking that you have nothing left to learn is a dangerous mentality for any developer, especially a new developer. 

      There is so much to learn in the world of web development and technology as a whole. In the world of tech, things are constantly changing and improving. As new technologies and frameworks are released, you’ll have to keep yourself informed to remain competitive and able to provide solutions for your clients that meet current industry standards. 

      Jump into Stack Overflow and GitHub to find the answers to questions you have, or just to scan through the questions other developers are asking. Develop a reading list of industry blogs and magazines. Take a course on new technology. Most importantly – code every day!  

      Here are some resources I like to keep my knowledge up to date:

      3. Tools You Need (And Should Get Good At!)

      Every agency will have different tools and processes that they prefer – but there are a couple of tools that I wish I had a better grasp on before starting my first development job. 

      Code editors –  

      As a developer, you’ll be writing a lot of code, so a proper code editor is a must. The code editor can make a big difference when you’re writing code. It will ease your life as a developer by helping easily navigate and edit code, especially if you learn the keyboard shortcuts to make coding a project just a bit faster. I love to use VS Code, here are some Keyboard shortcuts for VS Code.

      Command line/Terminal – 

      Command-line experience is a must for a developer.

      A lot of your work will be dependent on the command line (git), as well as some technologies requiring you to have command-line knowledge. There will be only a few commands that you’ll have to memorize and as much as you will end up using them, you won’t have a problem memorizing them. For everything else, there’s always our best friend – Google.

      Browser Dev Tool –

      You should be proficient with different browser’s Dev Tool or Developer Tools. Being a web developer is not only about writing code or working with the command line. But also debugging!

      My favorite browser to work with is Chrome. Here is the complete documentation on Dev Tools for Google Chrome.

      4. Stay Organized (Good Planning)

      Organizational skills and good planning can help you save a lot of time, reduce stress when the deadline is approaching, and help you finish on time every day. Making a simple project-based to-do list will allow you to: stay organized, keep your head clear and focus on the task at hand, highlight any roadblocks early, and easily keep your senior developers, managers, and clients in the loop. As the old saying goes – proper planning and preparation prevent poor performance!

      Here are a couple of tools I like to help keep me organized:

      • Trello
      • Note – VS Code extension
      • Notion
      • And of course….when all else fails, pen and paper!

      5. Be Confident

      It’s sometimes easier said than done to remain confident as a new developer – but being confident in the skills/knowledge you do have, and confident in asking questions about the ones you don’t is key to success.

      Stay open to all the new things and be willing to make an effort to explore and understand them. Being a great developer takes time and consistent effort. Be confident in knowing you will reach that senior developer level if you keep practicing, learning, and asking questions.

      Come Code With Us!

      Are you a developer looking for your next opportunity? Check out our job openings – we’d love to have you on our growing development team.

      Are you a client looking for a rockstar development team to provide you with the solutions that will help take your website to new heights? Connect with our sales and strategy team today.


      Want to stay up to date on all things Solution? Join our newsletter.

          

        What to Expect When Working with the Solution Agency Development Team

        Getting started working with a new development team at a digital agency that your team has never worked with before can seem daunting. You want to make sure that you are getting a development team that is going to take the right approach to ultimately meet your development goals. A team that is agile, and able to work easily with your internal teams is key for most clients.

        Our goal at Solution Agency is to constantly be learning, adapting, and fine-tuning our approach to both our development process and our project management process. Not to mention – making sure we are staying up to date with the latest development trends and technologies to provide you with solutions that are relevant and meet industry standards.

        Curious about what it might be like if you choose Solution Agency as your development partner? Read on…we are going to break down our core development services, how we manage those internally, and how the development team interfaces with our other in-house teams to deliver successful results for every client.

        What Types of Development Projects Does Solution Agency Work On? And HOW Do We Work On Them….

        Full Development Projects

        A full development project encompasses anything from new site builds website site redesigns, implementation of new site functionality, and more. Basically – anything that is not an emergency support request or ongoing site maintenance. These projects are our bread and butter – we love to help our clients build (or rebuild!) their websites into something functional and beautiful that will help them reach their digital goals.

        Managing Full Development Projects

        Full development projects are typically the hardest type to manage. There are a lot of moving parts to full development projects, and depending on the project timelines can be lengthy. Full development projects require a consistent approach from the very start of the project to ensure that our development team, and the client’s internal team (your team!), stay aligned in terms of goals and expectations.

        Don’t worry though – with over 15 years of web development experience, we make sure our process is easy to follow and clearly outlines the expectations every step of the way. Here is how we breakdown the phases of our full development projects:

        Phase 1: Strategy, Technical Discovery and Sitemap/Content Mapping

        The first phase in any full development project is the discovery phase. The discovery phase allows our team to accomplish a couple of key things before we actually begin development including:

        • Understanding your brand’s goals and industry positioning.
        • Collecting your brand’s assets and guidelines – think colors, logos, font styles, and more.
        • Understanding the technical needs (and constraints) of the website. Defining the technologies, frameworks and third party integrations that will be used. For example, does your site need a booking plugin integration? How will that work from a technical standpoint and a user experience perspective?
        • Outlining any specific WordPress backend customizations needed for ease of updating the website longterm.
        • Reviewing any previous website analytics to determine visitor device usage, traffic sources, etc. that may influence end design and responsiveness.
        • Working with the client to determine key content pages, keywords, CTA and messaging used throughout the website. This helps us begin building our initial user flow/sitemaps and content maps.

        We devote a considerable amount of time to this strategy and discovery phase as this phase is crucial to the success of every team that will be working on the project and informs the design and development decisions we make moving forward. 

        The bigger the project – the more time is needed to devote to the management of discovery and strategy. You can expect this to be a highly collaborative phase, between not only our internal teams but with you – the client – to make sure that all of the information we are collecting is correct and aligns with your end goals.

        The end goal of this phase is to gather and record all of the information needed to actually begin the execution of your project. This phase sets every team – not just our development team – up for the successful completion of your project.

        Phase 2: Design

        Most – if not all – full development projects include some sort of design phase. During this phase, our in-house design team will begin to leverage the materials gathered in phase one to start designing your website look and feel concepts.

        While we won’t dive into all the nuts and bolts of the design phase – this article is mainly focused on development team processes – during this phase you can expect our design team to build out a series of page templates, and mobile templates that our developers will use as the basis to begin building your website.

        Our development team likes to be a part of the design conversation and review all designs prior to client review, to confirm that the designs can be executed as expected.

        Phase 3: Development

        After completion and sign-off of the design phase, we start phase three – the development phase. This is where we begin actually building your website – and where the process really starts to get exciting, as things become functional and you see your vision come to life.

        The Solution Agency development team primarily focuses on custom WordPress development. No two sites are the same – and you won’t see any premade or out-of-the-box themes used here. As such, each development phase is going to look a little different depending on the client’s needs and build goals.

        Once we are in phase three, we’ve got our technical strategy, sitemaps, content maps, and site design hammered out. The development process begins with setting up our development environment on our servers. This development environment is our testing grounds and is completely password protected and non-indexable so that our team (and your team!) can work on, and review the site before it goes live for the world to see.

        Once the development environment is set up – we always start with the basics. Building out the core UI of the site (items like headers and footers). From there we start developing the global styles (items like typography, vertical spacing, button styles, etc) and page templates – providing us with a consistent base to load content and specific functionality components into.

        A typical full development timeline might look something like this:

        1. Set up the development environment.
        2. Build base UI and global styles.
        3. Build page templates.
        4. Input website content.
        5. Build any custom functionality and integrate third party plugins or eCommerce functionality.
        6. Present to the client for review and revise as needed.
        7. Client approval to head into QA testing and launch preparations.

        Phase 4: QA Testing & Launch Preparation 

        Once the client has approved the website development in phase three, we move on to phase four: QA testing and launch preparations. In this phase, the Solution Agency development team will do a thorough review of all the website pages and functionality. Looking specifically for UI/UX issues that need to be addressed before the website launches.

        QA testing involves a manual process of clicking around every single page of the website, testing all contact forms, search functionality, plugins, and other third-party integrations. Anything an actual viewer on your website might do – we test it to make sure it works correctly. We also test the website on a variety of popular modern devices, browsers, and screen sizes to ensure that the experience remains consistent for every type of user.

        During phase four we review site performance, utilizing Google developer performance and speed testing tools to assure that our websites meet current performance standards. 

        At the end of phase four, we work with our digital marketing team to ensure that the SEO basics (as listed in your SOW) are met before the site launches. This might include items like:

        • Connecting Google Analytics
        • Connecting Google Search Console
        • Basic on-page SEO optimizations:
          • Meta titles
          • Meta descriptions
          • Alt tags on images
          • H structure
        • Set up any 301 redirects as needed
        • Configuration of Yoast SEO plugin

        Once our development team has completed the QA phase, we then pass the website on to the client for a final review before we take the website live.

        Phase 5: Launch

        The launch is the most exciting phase for most clients – this is when our development team takes your website live on the internet for the world to see. 

        A lot can go into a launch process – and each site is different – so we won’t be detailing all of the launch steps in this article. However, you can expect a couple of things after we have launched your new website including:

        • Immediate installation of SSL certificate
        • Submission of final sitemap to Google Search Console
        • Final review of website functionality and 301 redirects, immediate fix of any post-launch issues.
        • A 2-hour virtual WordPress training for your team to make website content updates (if requested)

        Okay…but what if I don’t need a full development project? What other development services does your team offer?

        We’re happy you asked – our development team also handles support requests and ongoing website support services.

        Support Requests & On-Going Support Services

        What is website support?

        Anything from an existing client regarding a site we made for them (or one we inherited). This could be a report of an issue, a request for a new page, a request for a menu change, content changes, etc.

        What is the most crucial aspect to successful support services?

        Communication. We always aim to let a client know an estimate, target start/end date, and any potential challenges we anticipate. Communication is key to a successful support relationship.

        How does our development team manage support services?

        We have a quick 30-min huddle every morning to make sure that our team is always aligned on support request timelines, and to review new support requests that come in. We use project management software to track the hourly progress, from estimate to confirmation, and that the request is completed as expected. 

        Every new approved task (or set of tasks) is entered into our project management software as a new support project. This allows budgets, due dates, and notifications to be set on a granular project level. This provides a system for making sure that nothing gets lost in the shuffle and allows for easy billing transparency (something our clients enjoy!).

        Support requests are a shared responsibility that our entire development team takes on. Our goal is to get tasks in and out efficiently and correctly. With clearly defined estimates, start and stop dates – our clients always know what to expect from our development support services so they can plan accordingly.

        The Development Solution You’ve Been Waiting For

        We believe in our processes, and tools – but what makes our development team a success is the people on it. Our combined experience and ability to work in unison as a cohesive team is what sets our web development services apart from the rest.

        Ready to get started on your next development project? Need some development support? We’ve got the solution you need – from big to small our developers can tackle it all – connect with our team today.


        Want to stay up to date on all things Solution? Join our newsletter.