Creating Accessible
Creating accessible websites means thinking about the design and development of the website with a few more things in mind than usual. In the end, adding a few more points of importance relating to accessibility will become second nature to your process. Below are the biggest areas that can be focused on to create the biggest impact to create accessible websites.
Color
Color is often discussed in accessibility, in particular, due to color-blindness and other vision deficiencies. It is important to choose colors that are visible to the most amount of people. It is also a good idea to determine if your color choices are accessible early on in the design project so as designs with poor accessibility do not become the choice. It is much more difficult to go back and correct the mistakes in the accessibility of a design than just designing with accessible color choices initially.
Color contrast
Ensuring that text is visible on the of the background that it is placed on is vital to accessible color contrast. If a websites background and the font color do not have the correct amount of contrast, some users will not be able to read your content, which is not something that helps your website and it’s purpose.
An example of particularly hard to read text and background option is a green and red combination which can be seen below. Not only is this difficult or impossible for certain colorblind individuals to see, even those without vision problems can have difficulty reading this.
Black and white may seem to be the best option, but that is not always the case, not only is there a potential color contrast issue but those who have dyslexia have said it is harder for them to read content when it is black and white. Off-white background and a black font has been called out as a good option.
Tools
When in doubt use tools to determine if your color palette is visible by the widest amount of people. There are so many variations of sight that are affected by color contrast issues that it is best to use tried and tested tools to help you pick the best colors. One great tool is the color palette creation tool Color Safe.
Font
Font is again a choice of making the clearest option available to all users. Overly stylized fonts can be difficult for people with vision issues, be it a diagnosed vision issue, to elderly individuals. But even people with other accessibility issues need clear font, it’s advised for those with dyslexia a sans serif font is ideal. Picking a web font that is clear and easy to read, mimicking Helvetica and the like is a great option. It allows the widest amount of individuals to be able to read with ease, and it is not required that they have that font on the device they are using.
Images
The treatment of images on a website relays heavily on how it is handled in the code so the those who cannot see an image, get the most out of the image.
Alt Text
Alt text allow for a screen reader to be able to read to the user what the image is. Alt text gives a description of what an image is that a screen reader can communicate to users. Providing alt text also gives benefit for situations where an image may not load due to connection issues or corruptions within a website, in those cases, the alt text becomes visible to the user when it would normally be hidden to them.
<img src"example.jpg" alt="This is an example image of a cat sitting on a chair looking out a window.>
Decorative Images
It is important to ensure that you code images that are decorative in a way that denotes that they are decorative and do not impact the content of the website. Creating a blank alt text allows for a screen reader to know it should skip that portion of the content.
<img src="example.png" alt="">
Navigation
Feeling comfortable and knowing where one is within a website is important for accessibility, for those using a screen reader, those with cognitive issues that may get confused as to where they are within a website, or elderly people that need visual cues and makes to where they are. Creating a clear main menu, and giving help to navigate the site on the whole and individual pages is important.
Menu
The main menu is the primary way to orientate someone. It is important to make sure it is the same across every page of your site and that it indicates what page an individual is on. This helps people feel comfortable and familiar with where they are and they can confidently navigate your site. Making sure colors have the correct contrast is important so the menu is clear to all users.
Labeling the main menu with the semantic tag <nav> makes it clear to screen readers. As well as including aria-label="Main Navigation" to further explain that it is the main navigation. Below is an example of using the <nav> tag to create a main menu
<nav aria-label="Main Navigation" div class="nav">
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="design.html">Creating Accessible</a></li>
<li><a href="process.html">Process & Personas</a></li>
<li><a href="advocacy.html">Advocacy</a></li>
<li><a href="resources.html">Resources</a></li>
</ul>
</nav>
Navigating a Page
Another important aspect of the main menu to consider for both individuals using a screen reader and those that use a keyboard to navigate the site is the option to skip the main menu. If the user has been on a certain website for a while now and does not need to look at the menu, without a skip option a screen reader will read the menu again, and if you are tabbing through a site a user will have to tab through each menu item each time. This website shows an example of adding a skip to main content option, you can skip to any part of a website and can have multiple locations to skip to. All it takes is a little HTML and CSS which can be seen below.
HTML for skipping navigation, note the href="main" which will point to the part of the page you'd like the user to be able to skip to.
<a class="skip-main" href="#main">Skip to main content</a>
<nav aria-label="Main Navigation" div class="nav">
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="design.html">Creating Accessible</a></li>
<li><a href="process.html">Process & Personas</a></li>
<li><a href="advocacy.html">Advocacy</a></li>
<li><a href="resources.html">Resources</a></li>
</ul>
</nav>
CSS for skipping navigation
a.skip-main {
left:-999px;
position:absolute;
top:auto;
width:1px;
height:1px;
overflow:hidden;
z-index:-999;
}
a.skip-main:focus, a.skip-main:active {
color: #fff;
background-color:#000;
left: auto;
top: auto;
width: 30%;
height: auto;
overflow:auto;
margin: 10px 35%;
padding:5px;
border-radius: 15px;
border:4px solid yellow;
text-align:center;
font-size:1.2em;
z-index:999;
Keeping focus on links is important because it allows those using a keyboard to navigate to know where on the site they are currently situated.
Structure of Code
There are little things that can be done while writing HTML that can help a website become more accessible. From structuring it correctly to utilizing HTML5 semantic tags, these small changes can become part of your normal process and make your site not only more accessible but these changes have proven to also make websites have better search engine optimization.
Headings
Structuring headings in order is one of the most important thing that can help make a large impact in creating better accessibility with little changes. Screen readers and other assistive technology use headings to help understand and communicate the structure and summarize what the page is about. All web pages should start with an <h1> tag, and from there follow a logical order, if including subsections make sure they are in logical order, and when starting a new section to do so in a logical sense. Think of it as taking bulleted notes, they are blocked out sectionally and continue the same order throughout the document. Below is an example of how headings should be orders
<h1>Title</h1>
<h2>Sub Section</h2>
<h2>Sub Section</h2>
<h3>additional topic</h3>
<h3>additional topic</h3>
<h4>aside topic</h4>
<h3>additional topic</h3>
<h2>Sub section</h2>
Links
It may be tempting to put simple small links to keep your format and look clean. However, this is not accessible, descriptive links help assistive technology explain what a link is better, and those who may have difficulty understanding what they are clicking on. Instead of a <a href"www.example.com">click here</a> link something like<a href"www.example.com">click here to access the 2018 rates</a>is a better option.
Making sure that normal formats are kept with links is important, underlines, different color, because it universally symbolizes that that portion of content is a link.
Semantic HTML
Semantic tags became a significant part of HTML5, semantic tags give a better description of what the piece of contact within the tag is supposed to be. The <nav> tag discussed earlier is one such example, calling out that the content within that tag is navigation. alt is another example for alt text. <header> and <footer> also help give some structural and directional understanding. Learning semantic HTML gives you more options in organizing your code while benefiting accessibility. There are several resources available to learn semantic HTML, including the W3School.
Allowing for user choice
Allowing users to choose how they utilize your website is very important. People looking for specific accessibility capabilities that may not be standard on a website, a particular font, font size, color, etc. for example will often use resources to talor to their needs. This could involve changing the look of the site to focus on content, change the font, or even just zoom in. It is important to not block these options. In the and your content is the most important communication point.