The Web was developed to remove communication barriers and be able to distribute information quickly to as many people as possible. However, there are currently some barriers that still exist. One of these barriers are people with disabilities. It is best to break this down into four categories as follows: visual, motor, hearing, and cognitive. To break down some of these barriers it is essential for developers and organizations to create high quality websites and web tools that enable people with disabilities to interact fully with the Web.

Focus

Developers need to keep three areas in mind when they are creating accessible websites; focus, semantics, and styling. Focus is important because there are users that need to operate their computer entirely with their keyboard. This means they are using their keyboard to reach everything on their screen. Therefore, developers need to ensure that all of the pages that they create should be functional with a keyboard unless it is something that cannot be done with a keyboard. There are a few things that have built-in keyboard event handling without developer intervention. These are text fields, buttons, and select lists. Some of the elements that are not focusable are paragraphs, divs, and various other page elements. These were not designed to be automatically focusable because the user generally will not interact with these elements.

It is important to note that using CSS can cause issues with accessibility as well. For example, float can cause the order on the screen to appear different than the order in DOM. This will cause the tab order to jump around randomly and confuse users that rely on the keyboard. For this reason, it is important for developers to tab through their websites before they publish them to ensure that the tab order does not disappear or jump around out of order.

Semantics

Images add visual interest on any website. However, there are people that are not able to see the images that are used on websites. Instruments like screen readers are able to communicate to visually impaired users that there is an image but how this is interrupted is up to the developer. For this reason, it is important for developers to carefully consider the text alternative that they use to describe an image. In order for the alternative text to be useful it needs to convey the same concept as the image. This can be accomplished by using the alt attribute. However, it is not always useful to describe an image. For example, if you have an image next to a button that already has text in it like, search, then you do not need to add alternative text to the image that says search. The screen reader will pick up the word search that is in the button. Therefore, adding the alternative text to the image will only add redundancy. However, if you not add an alternative text to an image then the screen reader will read the image file name instead. To avoid this the developer can use an empty alt attribute. This will cause the screen reader to skip the image altogether.

HTML gives the developer the ability to write accessible websites with very little effort. Many of the standard elements have the semantics and supporting behavior built into them. Screen readers often rely on a list of headings to locate information. Other elements that a screen reader uses to move around a page is links, form controls, and landmarks. There are three things that can cause screen readers to have an issue finding links on a page. The first is anchor tags that do have the href attribute. The second is buttons that are implemented with links. This causes the screen reader to communicate the content as a link instead of a button. The third is linked images. Linked images can be unreadable to screen readers. To help ensure that screen readers are able to communicate this content properly the image needs to have the alt attribute. When the developer is creating the link texts, it is essential that the text communicates to the user where the link goes. Many developers use link texts that say “learn more.” However, when a screen reader is being used this does not convey meaningful information to the user about where the link goes.

While HTML is able to make many elements on the page accessible it does not make everything accessible. For example, HTML is not able to make a pop-up menu accessible. A good way to bridge the areas with accessibility issues is with ARIA. ARIA allows you to specify attributes that modify the way an element is communicated in the accessibility tree.

Styling

When an element is focused we generally reply on the built-in browser focus ring to style the element. As stated earlier, keyboard users need the focus ring in order to know which element has the focus. There may be times when the focus ring will be distorted or not fit the design of the website. The developer is able to fix these issues by using the :focus pseudo-class. It is even possible to combine the :hover and :focus pseudo-class to give the element the same hover and focus style.

Browsers are able to detect whether user interaction occurred with a mouse or a keyboard for native elements like buttons. This enables the browser to only show the focus ring for keyboard interaction. However, when an element is styled using the :focus style the focus ring will will display for both mouse and keyboard interactions. There are some workarounds for this issue through the use of JavaScript. However, the solution is different depending on the browser that is being used.

Responsive Design

I bet you are wondering what responsive design has to do with accessibility. Actually, a responsive website improves the user's experience and gives the users better access to the content. There are four things to keep in mind that will make the website responsive and accessible. First, always use the proper viewport meta tag. This will tell the browser to fit the content to the screen size so that the content is readable to all users. Second, design with a responsive grid. This tells the content to reflow whenever the page changes size. These pages are usually designed using percents, ems, or rems instead of hand-coded pixels. Third, use relative units like em or rm instead of pixel values. This enables the user to resize the text to their preference. Lastly, ensure that buttons and links have enough space around them when they are displayed on a mobile device.

Web accessibility is important because the point of the web is to break down barriers to communication. By making a website accessible, more people will be able to reach and interact with the content on the website. The best way to make a website accessible is to use focus, semantics, and styling. It is imperative to be careful when styling a website because it can through off screen readers. Lastly, the move towards responsive design is helping with the push towards web accessibility. The best way to ensure that people with disabilities are able to use a website is to test it for accessibility before the website is published.